材质图标未正确渲染答案

【问题标题】：Material icon not rendering properly材质图标未正确渲染
【发布时间】：2018-03-19 20:47:12
【问题描述】：

材料图标在我的项目中未正确呈现，我已正确安装但即使未在浏览器中显示。

我遵循以下步骤：

npm install material-design-icons

.angular-cli.json

"styles": [
        "styles.css",
        "../node_modules/material-design-icons/iconfont/material-icons.css"
      ],

app.module.ts

import {MatSidenavModule, MatToolbarModule, MatIconModule} from '@angular/material';

app.component.html

<mat-toolbar-row>
    <span>Second Line</span>
    <span class="example-spacer"></span>
    <mat-icon class="example-icon">verified_user</mat-icon>
  </mat-toolbar-row>

【问题讨论】：

mat-icon -> md-icon，在昨天发布之前，它也是导入MdIconModule而不是MatIconModule的首选途径。
旁注...您是否确保包含实际字体（而不仅仅是 css）google.github.io/material-design-icons/#icon-font-for-the-web？

标签： angular angular-material google-material-icons

【解决方案1】：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

确保已将其添加到您的 index.html。

【讨论】：

【解决方案2】：

检查您的控制台是否存在其他错误。

如果您的组件中有其他错误，则可能会阻止您的 mat-icon 正确初始化，而您只会看到字形的文本表示。

【讨论】：

【解决方案3】：

在 Angular 6 中遇到这个问题，最终解决方案是添加 mat-icon-button，

<button mat-icon-button type="button" 
    (click)="yourMethod()">
    <mat-icon>delete</mat-icon>
</button>

确保将 MatIconModule 添加到 app.module.ts 导入中，它应该像一个魅力一样工作。

【讨论】：

【解决方案4】：

我已经制作了自己的文字字体!important

必须让图标更重要：

.lato * {
  font-family: 'Lato' !important;
}

.mat-icon{
  font-family: 'Material Icons' !important;
}

【讨论】：

为我工作。 .material-icon 如果您今天使用的是过去。
对我来说奇怪的是，只有带下划线的图标不起作用，但这修复了它。谢谢！

【解决方案5】：

我有同样的问题。原因是我在我的 theme.scss 中的字体之前导入了材质主题。

应该是：

@import url( 'https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');

@import '~@angular/material/theming';

【讨论】：

【解决方案6】：

我遇到了同样的问题，因为我忘了在 NgModule.imports 上添加模块：

@NgModule({
  imports: [
    MatIconModule
  ]
})

【讨论】：

【解决方案7】：

考虑使用 google CDN，将以下内容添加到您的 index.html：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

编辑：

移动/下载 CSS 文件并将其放在您的资产文件夹中，然后在您的 angular-cli.json 中将以下内容添加到您的样式数组中：

"../src/assets/material-icons.css"

【讨论】：