更新

Question

我想在角度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中描述here

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

Answer 2

只需按照以下步骤操作：

从 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的{{1}}下添加.angular-cli.json文件夹（虽然默认情况下会在那里）：
```
assets
```
最后，通过带有{ "apps": [ { ... "assets": [ "assets" ] } ] }输入的MatIcon组件使用它：
```
svgIcon
```

更新

我已更改说明，以便它适用于更高版本。

Answer 3

与@ creep3007的答案类似，您可以在.angular-cli.json中指定样式表：

安装npm包

npm install material-design-icons --save

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

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

使用

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

Answer 4

安装npm软件包

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

在您的.angular-cli.json中添加实质性图标css（不要忘记重新启动“ 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>

从“材料设计图标”中选择名称=> https://material.io/tools/icons/?style=baseline

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编译器抱怨的默认集所必需的。如果您忘记这样做，您将收到一系列错误，如下所示：

错误 ./node_modules/css-loader!./node_modules/postcss-loader/lib??ref--3-2!./node_modules/sass-loader/lib/loader.js!./src/styles.scss 找不到模块：错误：无法解决 '../fonts/materialdesignicons-webfont.eot'in '/家庭/ myRepo /对myApp'

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

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

上面的另一个替代方案是导致图标只需很少的工作，就是直接导入CSS。在typescript文件中，我替换了styleUrls元素（以避免与Karma的奇怪错误）：

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

Answer 6

使用Bootstrap 4＆amp; 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' ）...

@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 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';并在MatIconModule部分中添加imports

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-保存@ 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

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

9 个答案:

更新

图标：