Angular 角度材质图标不工作

我已经安装了用于角度测量的材料

我已在我的应用程序模块MatIconModule上导入（使用“@angular/material/icon”的

import{MatIconModule}；

）

我已将其添加到我的ngmodule imports下，其中包括：

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

我已经导入了所有样式表

我还将其导入到我的应用程序组件中，该组件实际上正在（尝试）使用它们（从“@angular/material/icon”导入另一个

import{MatIconModule}；

行在它的开头）

但是材质图标仍然不会出现

例如，使用这一行：

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

菜单

我期待着这样的事情：

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

但我明白了：

---

有什么建议吗？

为材质图标添加CSS样式表

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

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

---

请参阅-

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

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

---

我意识到，在将hammerJs导入应用程序之前，一开始没有人提到安装hammerJs。对于有类似问题的用户，您首先需要导入hammerJs，您可以使用NPM、Thread或google CDN进行安装。此答案适用于NPM或纱线的安装：

NPM

纱线

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

---

如果您喜欢使用Google CDN，请访问Angular material以获得更多解释

如果使用SASS，您只需将此行添加到主

.scss

文件：

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

---

如果您希望避免从google获取图标，您还可以自行托管图标，如中所述：

对于那些希望自行托管web字体的用户，需要进行一些额外的设置 必要的。例如，将图标字体放置在某个位置 并添加以下CSS 规则：

此外，还需要修改呈现图标的CSS规则 声明以正确呈现字体。这些规则通常是有效的 作为谷歌网页字体样式表的一部分，但需要 自托管字体时手动包含在项目中：

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* 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';
}

---

完整的解决方案可以是：

第一步

您必须在项目中导入

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

在我的例子中，图标没有显示，因为我使用了！重要的。去掉它会导致图标出现。

在我的例子中，我写的图标名称与任何图标都没有关联

您可以在此处检查正确的名称：

---

我遇到了图标不显示的问题。我遵循了Basavaraj Bhusani提供的步骤，但仍然不起作用

我发现问题在于，在我的SCS中，我使用了

文本转换：大写

，这导致图标只显示内容“arrow\u forward”。我必须更改图标上的

文本转换：none

，否则它将无法渲染

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

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

                    }

对于角度6+：

npm安装此：

npm安装材料设计图标

将样式添加到angular.json：

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

---

在我的例子中，应用了一种样式来覆盖字体族。因此，我明确地添加了字体族样式，如下所示：

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

---

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

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

---

如果覆盖了某些现有的角度材质样式或以某种方式影响图标的任何其他样式，则可能会导致问题。将图标代码移到任何样式和测试之外

对我来说，它是字体变体：小号大写字母

所以我把它移到了子元素。下面是角材质栅格的一部分

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

家
{{item['title']}

错误的图标名称：某些材质图标名称错误

例如：为

filter\u alt

但是它出现了

---

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

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

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

---

字体可能丢失。或者以后再加载。@BasavarajBhusani如何检查？在执行下面的解决方案后，您应该清除浏览器缓存。这个答案对我来说很有用，但我也能将这一行添加到styles.css中，而且很有效<代码>@import'https://fonts.googleapis.com/icon?family=Material+图标'您还可以添加：

@import“~material icons/icont/material icons.css”到您的样式。css@PooshonBanerjee材质图标是一个单独的项目，不由Angular material团队维护。谢谢！我已经被困在这里好几个小时了！当图标未呈现而显示关闭文本时遇到问题。将上述导入附加到我的scss文件中，它开始显示“X”图标。谢谢：）我有angular 9项目，在.scss中导入材质图标字体文件后，仍然是同一个问题，材质图标不可见，它正在使用cordova创建的.apk文件中显示测试“可见性关闭”。但在localhost:4200中同样可以正常工作，所以还有其他解决方案吗？这是正确的角度方法！。。。当使用Angular应用程序（如Cordova）时，正确的方法对我来说是可行的。我没有使用谷歌api，而是安装了material design。请阅读如何写出一个好的答案
link href="https://fonts.googleapis.com/icon?family=Material+Icons"  rel="stylesheet"

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

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

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

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