材料图标无法正确渲染

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>

- dhana

---

mat-icon -> md-icon，在昨天的发布之前，导入MdIconModule而不是MatIconModule是首选路线。 - Z. Bagley

顺便提一下，你确定包含了实际字体（而不仅仅是CSS）吗？http://google.github.io/material-design-icons/#icon-font-for-the-web - Z. Bagley

Answer 1

我遇到了同样的问题。原因是我在theme.scss中引入了Material主题之前没有引入字体。

应该改成：

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

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

- Chris Fremgen

Answer 2

请确保此代码已添加到您的 index.html 文件中：

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

- headmelon

Answer 3

我已经制作了自己的文本字体!important，必须使图标更加重要：

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

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

- jenson-button-event

---

对我有用。如果你使用的是过去的日期，可以使用.material-icon。 - Alexander Kleinhans

对我来说很奇怪的是，只有带下划线的图标无法正常工作，但这个方法解决了问题。谢谢！ - seawave_23

Answer 4

我之前也遇到过同样的问题，因为我忘记在 NgModule.imports 中添加模块：

@NgModule({
  imports: [
    MatIconModule
  ]
})

- Dung-Tri LE

Answer 5

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

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

编辑：

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

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

- Hamed Baatour

Answer 6

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

如果您的组件中出现了其他错误，可能会导致您的mat-icon无法正确初始化，您只能看到字形的文本表示。

- Simon_Weaver

Answer 7

我遇到了同样的问题，关闭图标变成了文本。 这是因为网络问题，因为网络速度慢，所以 maticon 模块没有正确加载。 重新连接到良好的网络信号解决了我的问题。

- harsh

Answer 8

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

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

请确保在您的 app.module.ts 中添加 MatIconModule 到导入中，它应该可以完美地工作。

- GoranSu