材质图标未正确呈现

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

我遇到了同样的问题。导致因为我在我的主题.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">

确保这已添加到您的索引.html。

Answer 3

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

必须使图标更加重要：

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

Answer 4

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

@NgModule({
  imports: [
    MatIconModule
  ]
})

Answer 5

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

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

编辑：

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

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

Answer 6

在 Angular 6 中遇到了这个问题，解决方案最终是添加垫子图标按钮，

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

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

Answer 7

检查主机是否存在杂项错误。

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

Answer 8

我遇到了同样的问题，而不是图标"关闭"文本来找我。这是互联网问题，互联网很慢，所以马蒂康模块没有正确加载。以良好的网络强度重新连接解决了我的问题。