如何在 Angular 4 中使用 Material Design 图标? [英] How to use Material Design Icons In Angular 4?

问题描述

我想在我的 angular 4 项目中使用

在您应用的模块(又名 app.module.ts)中，添加以下几行:

import {MatIconRegistry} from '@angular/material/icon';从@angular/platform-b​​rowser"导入 {DomSanitizer}；...导出类 AppModule {构造函数(私有 matIconRegistry:MatIconRegistry，私有 domSanitizer:DomSanitizer){matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityResourceUrl('/assets/mdi.svg'));}}

确保在 assets 中包含 .angular-cli.json 下的 assets 文件夹(尽管默认情况下，它将是那里):

{应用程序":[{...资产":[资产"]}]}

最后，通过带有 svgIcon 输入的 MatIcon 组件使用它:

I want to use the icons from https://materialdesignicons.com/ in my angular 4 project. The instructions on the website are only covering how to include it in Angular 1.x (https://materialdesignicons.com/getting-started)

How can I include the Material design icons so I can use them like <md-icon svgIcon="source"></md-icon> using Angular Material and ng serve?

NOTE: I already Included the google material icons which are different!

解决方案

Instructions on how to include Material Design Icons into your Angular Material app can now be found on the Material Design Icons - Angular documentation page.

TL;DR: You can now leverage the @mdi/angular-material NPM package which includes the MDI icons distributed as a single SVG file (mdi.svg):

npm install @mdi/angular-material

This SVG file can then be included into your app by including it in your project's assets configuration property in angular.json:

{
  // ...
  "architect": {
    "build": {
      "options": {
        "assets": [
          { "glob": "**/*", "input": "./assets/", "output": "./assets/" },
          { "glob": "favicon.ico", "input": "./", "output": "./" },
          { "glob": "mdi.svg", "input": "./node_modules/@mdi/angular-material", "output": "./assets" }
        ]
      }
    }
  }
  // ...
}

Your app's main module will also need the necessary imports (HttpClientModule from @angular/common/http used to load the icons and MatIconModule from @angular/material/icon) to be declared, as well as adding the icon set to the registry:

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

@NgModule({
  imports: [
    // ...
    HttpClientModule,
    MatIconModule
  ]
})
export class AppModule {
  constructor(iconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
    iconRegistry.addSvgIconSet(
      domSanitizer.bypassSecurityResourceHtml('./assets/mdi.svg')
    );
  }
}

A StackBlitz demo is also now available.

The steps for older versions of Angular are as mentioned below:

---

Simply follow these steps:

1. Download mdi.svg from here under the Angular Material section and place it in your assets folder, which should be located at (from your project's root) /src/assets:

2. In your app's module (aka app.module.ts), add the following lines:

   import {MatIconRegistry} from '@angular/material/icon';
   import {DomSanitizer} from '@angular/platform-browser';
   ...
   export class AppModule {
     constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer){
       matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityResourceUrl('/assets/mdi.svg'));
     }
   }
   

3. Make sure to include assets folder under .angular-cli.json in assets (Although by default, it will be there):

   {
     "apps": [
       {
         ...
         "assets": [
           "assets"
         ]
       }
     ]
   }
   

4. Finally, use it via the MatIcon component with the svgIcon input:

   <mat-icon svgIcon="open-in-new"></mat-icon>
   

这篇关于如何在 Angular 4 中使用 Material Design 图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！