Question

我已经安装了角度材料，

我已在我的应用模块MatIconModule上导入（import { MatIconModule } from '@angular/material/icon';）

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

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

我已导入所有样式表

我还在我的app组件中导入了它实际上（尝试）使用它们（在其开头有另一条import {MatIconModule} from '@angular/material/icon';行）。

但是材料图标仍然没有出现。

例如，使用以下行：

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

我期待这样的事情：

但我明白了：

有什么建议吗？

Answer 1

为材质图标添加CSS样式表！

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

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

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

Answer 2

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

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

Answer 3

对于Angular 6 +：

1）npm安装此：material-design-icons 2）将样式添加到angular.json：

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

Answer 4

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

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

Answer 5

完整的解决方案可以是：

第一步

您必须在项目中导入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">

Answer 6

您可以通过两种方式导入素材图标。一种是在你的项目的主index.html页面中导入图标。

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

另一种方法是将材质图标导入到主 CSS 文件中，如下所示。

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

我的意见是将其添加到 CSS 文件中。

Answer 7

我遇到了图标不显示给我的问题。我遵循了Basavaraj Bhusani提供的步骤，但是仍然无法正常工作。

我发现问题是在我的scss中，我有text-transform: uppercase，这导致图标仅显示内容“ arrow_forward”。我必须专门更改图标上的text-transform: none，否则它将无法呈现。

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

                        font-family: 'Material Icons';
                        content: "arrow_forward";
                        text-transform: none;
                        -webkit-font-feature-settings: 'liga';

                    }

Answer 8

图标名称错误：某些“材料”图标名称错误。

例如：Material Icon为

提供 filter_alt

<mat-icon aria-hidden="false" aria-label=" filter icon">filter_alt</mat-icon>

但它显示 ?

修复： 我们必须使用 filter_list_alt 作为渠道类型图标

<mat-icon aria-hidden="false" aria-label="filter icon">filter_list_alt</mat-icon>

Answer 9

我意识到，在将HammerJs导入到您的应用程序之前，没有人谈到要先安装HammerJs。对于有类似问题的人，首先需要导入HammerJs，可以使用NPM，Yarn或google CDN进行安装。此答案适用于使用NPM或Yarn进行安装：

NPM

npm install --save hammerjs

纱线

yarn add hammerjs

安装后，将其导入应用程序的入口点（例如src / main.ts）。

import 'hammerjs';

如果您希望使用Google CDN，请访问Angular材料以获取更多说明https://material.angular.io/guide/getting-started

Answer 10

在我的情况下，图标未显示，因为我使用！important弄乱了字体。取出来导致图标出现。

Answer 11

就我而言，我写的图标名称没有与任何图标关联。

您可以在此处检查正确的名称： https://material.io/tools/icons/?style=baseline

Answer 12

在我的情况下，应用了覆盖字体系列的样式。因此，我明确添加了字体家族样式，如下所示：

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

Answer 13

如果您覆盖了某些现有的Angular Material样式或以某种方式影响图标的任何其他样式，则可能会引起问题。将图标代码移到任何样式和测试之外。

对我来说，它是字体变化的：小写；

所以我只是将其移至子元素。以下是“角材料”网格的一部分。

  <mat-grid-tile colspan="3" rowspan="1" class='title customGlobalGrid'>
    <mat-icon aria-hidden="false" aria-label="Example home icon">home</maticon>
    <span style="font-variant: small-caps;">{{item['title']}}</span>
  </mat-grid-tile>

Answer 14

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

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

如果它没有解决问题，我猜是因为您使用了另一种字体并且还为该字体添加了!important，请尝试在您的style.css（或style.scss）中添加以下代码，即影响整个项目的通用/公共 CSS 文件：

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

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

Answer 15

只需将以下内容添加到index.html：

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

Answer 16

**Add following code to your css**

 .material-icons {  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;

    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

角度材料图标不起作用

16 个答案: