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

问题描述

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

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)

如何包含材料设计图标，以便可以像<md-icon svgIcon="source"></md-icon>那样使用Angular Material和ng serve来使用它们?

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?

注意:我已经包含了与众不同的google material icons！

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

推荐答案

只需执行以下步骤:

1. 从角材料下的此处下载mdi.svg.部分，并将其放置在assets文件夹中，该文件夹应位于(从项目的根目录开始)/src/assets:

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:

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

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

确保将assets文件夹包含在assets中的.angular-cli.json下(尽管默认情况下会存在):

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

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

最后，通过MatIcon组件和svgIcon输入使用它:

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

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

---

更新

我已经更改了说明，以便可以在更高版本中使用.

---

Update

I've changed the instructions so that it will work for later versions.

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