Question

我的项目中的素材图标无法正确呈现，我已正确安装，但即使没有在浏览器中显示。

我按照以下步骤操作：

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

.angular-cli.json

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

app.module.ts

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

app.component.html

{{1}}

Answer 1

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

应该是：

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

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

Answer 2

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

@NgModule({
  imports: [
    MatIconModule
  ]
})

Answer 3

考虑使用谷歌CDN，而不是将以下内容添加到data.forEach(function (array) { array.sort(function (a, b) { return a.date_start.localeCompare(b.date_start); }); });：

index.html

修改

移动/下载CSS文件并将其放在您的资源文件夹中，然后在<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">中将以下内容添加到样式数组中：

angular-cli.json

Answer 4

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

必须让图标更重要：

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

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

Answer 5

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

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

Answer 6

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

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

确保将MatIconModule添加到app.module.ts导入中，并且应该像超级按钮一样工作。

Answer 7

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

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

材质图标无法正确渲染

7 个答案: