如何在Angular4中使用Material设计图标？

Question

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

中

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

注意：我已经包含了不同的 google material icons！

Answer 1

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

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

npm install @mdi/angular-material

然后可以将此 SVG 文件包含到您的应用程序中，方法是将其包含在项目的 assets 配置中属性 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" }
        ]
      }
    }
  }
  // ...
}

您应用的主模块还需要声明必要的导入（HttpClientModule 来自 @angular/common/http 用于加载图标和 MatIconModule 来自 @angular/material/icon），如以及将图标集添加到注册表：

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 现在也可用。

老版本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>
```

Answer 2

对于那些喜欢使用 SCSS 的人：

安装字体

$> npm install material-design-icons

在 src/styles.scss

中导入

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

并按照 here

所述在 HTML 中使用它

<!-- write the desired icon as text-node -->
<i class="material-icons">visibility</i>

为了参考Sam Claus'的评论，谢谢大家，我添加了Templarian's design icons的安装和使用。和上面那个差不多。

通过包管理器安装字体

$> npm install @mdi/font

在 src/styles.scss 或 angular.json 中导入样式表，如 A. Morel

的评论中所述

@import '~@mdi/font/css/materialdesignicons.css';

或在index.html或任何地方使用CDN URL 并按照 here

所述在 HTML 中使用它

<!-- use the symbol name as a class instead of a text-node -->
<span class="mdi mdi-home"></span>

附录：我的回答有点老了。这仍然可以正常工作，但不再是最先进的。 A. Morel 的回答比较现代。

Answer 3

与@creep3007 的回答类似，您可以在 .angular-cli.json:

中指定样式表

安装 npm 包

npm install material-design-icons --save

将 material 个图标添加到您的 .angular-cli.json

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

使用它

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

Answer 4

使用 Bootstrap 4 & Angular 这有效：

1) 运行:

npm install material-design-icons --save

2) 添加到 styles.css 或 styles.scss

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

3) 转到：..\node_modules\material-design-icons\iconfont\material-icons.css 并确保该部分与此完全相同 ('MaterialIcons-Regular.woff2')。 ..:[=14=]

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url('MaterialIcons-Regular.woff2') format('woff2'),
       url('MaterialIcons-Regular.woff') format('woff'),
       url('MaterialIcons-Regular.ttf') format('truetype');
}

4) 在html中使用图标：

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

Answer 5

注意此答案适用于 Material Design Icons by Templarian 而不是 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 编译器报错。如果你忘了这样做，你会得到一系列的错误，如下：

ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib??ref--3-2!./node_modules/sass-loader/lib/loader.js!./src/styles.scss Module not found: Error: Can't resolve '../fonts/materialdesignicons-webfont.eot' in '/home/myRepo/myApp'

编辑：我不确定这是否有必要（在某些情况下可能是必要的），但我也更新了 .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')]

Answer 6

安装 npm 包

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

将 material 个图标 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 设计图标中选择名称 => https://material.io/tools/icons/?style=baseline

Answer 7

基于 @theMayer 的回答，我的版本可以使它适用于包 @mdi/font.

1- npm install @mdi/font --save

2- 在 angular.json 中，在 architect/buid/options/styles 下，添加 "node_modules/@mdi/font/css/materialdesignicons.min.css"

3- 在 src\app\app.module.ts 部分添加 import { MatIconModule } from '@angular/material/icon'; 并在 imports 部分添加 MatIconModule

4- 在 src\styles.scss 添加：

$mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons.scss";

5- 使用 mat-icon 在 html 中添加图标，例如：

<mat-icon class="mdi mdi-dumbbell" aria-hidden="true"></mat-icon>

Answer 8

使用此命令安装图标 - npm install material-design-icons --save
然后在样式数组中添加这一行 - "./node_modules/material-design-icons/iconfont/material-icons.css"

Answer 9

安装库 -

npm i --save @angular/cdk @angular/material @angular/animations hammerjs

在 styles.css

@import "https://fonts.googleapis.com/icon?family=Material+Icons";

里面 app.module.ts -

3.1 从'@angular/material/icon'导入{MatIconModule};

3.2 在导入数组中添加 MatIcomModule

然后在你的 app.component.html

图标：

家 add_alert

如何在Angular4中使用Material设计图标？

How to use Material Design Icons In Angular 4?

angular-material2

angular

图标：