24

材料图标在我的项目中未正确呈现，我已正确安装但即使未在浏览器中显示。

我按照以下步骤操作：

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>
4

7 回答 7

29

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

应该：

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

@import '~@angular/material/theming';
于 2018-04-19T15:00:08.877 回答
7

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

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

于 2019-02-22T14:25:12.617 回答
5

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

必须使图标更重要：

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

.mat-icon{
  font-family: 'Material Icons' !important;
}
于 2018-06-09T20:42:41.060 回答
2

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

@NgModule({
  imports: [
    MatIconModule
  ]
})
于 2017-11-05T11:52:11.603 回答
1

考虑使用 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"
于 2017-10-08T15:44:45.537 回答
0

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

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

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

于 2018-09-06T18:35:56.143 回答
0

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

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

于 2018-10-22T03:13:52.413 回答