angular - Material 图标无法正确呈现

Question

Material 图标在我的项目中无法正确呈现，我已正确安装，但即使未在浏览器中显示也是如此。

我遵循了以下步骤:

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 中的字体之前导入了 Material 主题。

应该是:

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

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