角度材料图标不起作用

Question

我已经安装了角度材料,

我在我的app模块上导入了MatIconModule(带import { MatIconModule } from '@angular/material/icon';)

我在我的ngmodule导入下添加了:

@NgModule({
    imports: [ 
//...
MatIconModule, 
//...

我已经导入了所有样式表

我还在我的应用程序组件中导入它,实际上(尝试)使用它们(import {MatIconModule} from '@angular/material/icon';在它的开头有另一行).

但材料图标仍然没有出现.

例如,使用此行:

<button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>

我期待这样的事情:

但我明白了:

有什么建议吗？

Answer 1

为Material Icons添加CSS样式表!

将以下内容添加到index.html:

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

请参阅 - https://github.com/angular/material2/issues/7948

Answer 2

对于 Angular 6+：

1. npm 安装这个： npm install material-design-icons

2. 将样式添加到 angular.json：

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

Answer 3

就我而言，应用了一种覆盖字体系列的样式。因此，我像这样明确添加了字体系列样式：

.material-icons{
    font-family: 'Material Icons' !important;
}

Answer 4

如果使用SASS，则必须将此行添加到主.scss文件中：

@import url（“ https://fonts.googleapis.com/icon?family=Material+Icons ”）;

Answer 5

• 首先使用 - 安装角材料 -

  npm i @angular/material  
  

• 在style.css文件中只需复制并粘贴 -

    @import "https://fonts.googleapis.com/icon?family=Material+Icons";
  

• 然后按照以下说明转到 app.module.ts -

   import { MatIconModule } from '@angular/material/icon';
  
   imports: [
          BrowserModule,
          MatIconModule,
          ................
         ],
  

• 在app.component.html文件中，只需复制并粘贴以下代码 -

       <mat-icon>home</mat-icon>
  

• 繁荣。这个对我有用。我希望，它会对你有所帮助。

Answer 6

首先，请考虑您需要将样式插入到项目中：

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

如果问题没有解决，我猜您正在使用另一种带有 !important 的字体，请尝试将此 css 类添加到 style.css （或 style.scss）中，这是通用/公共 CSS ：

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

参考这个答案：https://github.com/angular/components/issues/5863#issuecomment-316307387

Answer 7

您必须导入MatIconModule并在index.html中使用以下网址

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

Answer 8

完整的解决方案可以是：

步骤1

您必须MatIconModule在您的项目中导入，在我的项目中，我在单独的文件中导入必要的组件，然后将其导入 AppModule，您可以使用它或直接导入它们：

import { NgModule } from "@angular/core";
import { MatButtonModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
    imports: [MatIconModule, MatButtonModule], // note the imports 
    exports: [MatIconModule, MatButtonModule], // and the exports
})
export class MaterialModule { }

第二步

在您的index.html: 中加载图标字体

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