如何在Angular 4中使用Material Design Icons？

Question

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

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

注意:我已经包含了google material icons哪些是不同的!

Answer 1

对于所有使用scss的人:

npm install material-design-icons

在src/styles.scss中

@import '~material-design-icons/iconfont/material-icons.css';

在HTML描述这里

<i class="material-icons">visibility</i>

Answer 2

只需按以下步骤操作:

1. 下载mdi.svg从这里下角料部分,并把它放在你的assets文件夹,应位于(从项目的根目录)/src/assets:

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

2. 确保包括assets文件夹下.angular-cli.json的assets(虽然在默认情况下,它会在那里):

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

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

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

更新

我已经更改了说明,以便它可以用于更高版本.

Answer 3

与@ creep3007的答案类似,您可以在以下内容中指定样式表.angular-cli.json:

1. 安装npm包

   npm install material-design-icons --save
   

2. 将材质图标添加到.angular-cli.json

   {
     "apps": [
       {
         "styles": [
           "../node_modules/material-design-icons/iconfont/material-icons.css"
         ]
       }
     ]
   }
   

3. 用它

   <i class="material-icons">visibility</i>
   

Answer 4

安装npm软件包

npm install material-design-icons --save
npm install --save @angular/material @angular/cdk

将材质图标CSS添加到您的.angular-cli.json中（不要忘记重新启动“ ng serve”）

{
  "apps": [
    {
      "styles": [
        "node_modules/material-design-icons/iconfont/material-icons.css"
      ]
    }
  ]
}

或在您的src / styles.scss中

@import '~material-design-icons/iconfont/material-icons.css';

在app.module.ts中导入模块

import { MatIconModule } from '@angular/material/icon';

...

@NgModule({
  imports: [
      ...,
      MatIconModule
  ],

并像这样使用它：

<mat-icon>location_off</mat-icon>

从Material Design Icons中选择名称=> https://material.io/tools/icons/?style=baseline

Answer 5

请注意，此答案适用于Templarian的Material Design Icons，而不适用于Google 的同名图标。我不明白为什么这些说明不在自述文件中，但是你去吧。

首先，安装软件包：

npm install @mdi/font --save

然后，有必要将样式表添加到您的styles.scss文件中。我在文件末尾添加了以下内容：

//---------------------------------------------------------------------------
// Material Design Icons (https://materialdesignicons.com/)
//---------------------------------------------------------------------------
$mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons.scss";

需要注意的$mdi-font-path是需要覆盖内的一组默认@mdi/font/scss/_variables.scss这将导致的WebPack编译器抱怨。如果你忘记这样做，你会得到一系列错误，如下：

./node_modules/css-loader!./node_modules/postcss-loader/lib??ref--3-2!./node_modules/sass-loader/lib/loader.js!./src/styles.scss 模块中的错误未找到：错误：无法解析“/home/myRepo/myApp”中的“../fonts/materialdesignicons-webfont.eot”

编辑：我不确定这是否有必要（在某些情况下可能是必要的），但我也更新了.angular-cli.json文件styles元素：

"styles": [
        "../node_modules/@mdi/icon/font/css/materialdesignicons.min.css",

上面的另一种替代方法是直接导入 CSS，这使得图标工作起来很轻松。在打字稿文件中，我替换了styleUrls元素（以避免 Karma 出现奇怪的错误）：

 // styleUrls: ['./graphics-control.component.css'],
  styles: [require('./my.component.css'),
           require('../pathTo/node_modules/@mdi/font/css/materialdesignicons.min.css')]