如何在 Angular 4 中使用 Material Design 图标

发布于06月22日

我想在我的Angular 4项目中使用从https://materialdesignicons.com/开始的图标. 网站上的说明仅涵盖如何将其纳入Angular 1.x(https://materialdesignicons.com/getting-started)

我怎样才能包含material 设计图标，以便像使用Angular Material和ng serve一样使用它们？

NOTE: I already Included the 100 which are different!

推荐答案

关于如何将material 设计图标包含到Angular Material应用程序中的说明，现在可以在Material Design Icons - Angular文档页面上找到.

TL；DR:您现在可以利用@mdi/angular-material NPM软件包，其中包括作为单个SVG文件分发的MDI图标(mdi.svg):

npm install @mdi/angular-material

然后，通过将此SVG文件包含在angular.json中项目的assets配置属性中，即可将其包含到您的应用程序中:

{
  // ...
  "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" }
        ]
      }
    }
  }
  // ...
}

应用程序的主模块还需要声明必要的导入(@angular/common/http中的HttpClientModule个用于加载图标，@angular/material/icon中的MatIconModule个用于加载图标)，以及将图标集添加到注册表:

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')
    );
  }
}

现在还可以买到StackBlitz demo.

旧版本Angular的步骤如下所述:

只需执行以下步骤:

从Angular Material部分下的here下载mdi.svg，并将其放在assets文件夹中，该文件夹应位于(从项目的根目录)/src/assets:

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

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'));
  }
}

确保在assets中包括.angular-cli.json以下的assets文件夹(尽管默认情况下，它将在那里):
```
{
  "apps": [
    {
      ...
      "assets": [
        "assets"
      ]
    }
  ]
}
```
最后，通过带有svgIcon输入的MatIcon组件使用它:
```
<mat-icon svgIcon="open-in-new"></mat-icon>
```