材质图标无法正确渲染

Question

材料图标在我的项目中无法正确呈现,我安装正确,但即使没有在浏览器中显示.

我按照以下步骤:

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>

Answer 1

我遇到过同样的问题.这是因为我在theme.scss中的字体之前导入了材质主题.

应该:

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

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

Answer 2

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

确保这已添加到您的 index.html 中。

Answer 3

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

必须使图标更加重要：

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

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

Answer 4

考虑使用 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"