Angular 材料图标不起作用

Question

我已经为 angular 安装了 Material，

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

我已经将它添加到我的 ngmodule imports 下：

@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

如果使用 SASS，您只需将此行添加到您的主.scss文件中：

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

---

如果您不想从 google 获取图标，您也可以按照Material Icons Guide中的说明自行托管图标：

对于那些希望自己托管网络字体的人，需要进行一些额外的设置。 在某个位置托管图标字体，例如https://example.com/material-icons.woff并添加以下 CSS 规则：

 @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'), url(https://example.com/MaterialIcons-Regular.woff) format('woff'), url(https://example.com/MaterialIcons-Regular.ttf) format('truetype'); }

此外，需要声明用于呈现图标的 CSS 规则以正确呈现字体。 这些规则通常作为 Google Web Font 样式表的一部分，但在自托管字体时需要手动包含在您的项目中：

 .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'; }

Answer 4

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

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

Answer 5

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

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

Answer 6

完整的解决方案可以是：

第一步

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

在我的情况下，图标没有显示，因为我使用 !important 搞砸了我的字体。 把它拿出来会导致图标出现。

Answer 8

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

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

Answer 9

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

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

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

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

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

Answer 10

我遇到了图标不为我显示的问题。 我已按照 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 11

确保您没有覆盖默认font-family: 'Material Icons'; 使用更强大的 CSS 选择器，例如：

* :not(i){
    font-family: Nunito !important;
}

上面的 CSS 示例将更改<mat-icon>元素的字体，它们将显示文本而不是图标。

Answer 12

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

新PM

npm install --save hammerjs

纱

yarn add hammerjs

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

import 'hammerjs';

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

Answer 13

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

例如： 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 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

• 首先使用 -

   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 16

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

对我来说，它是 font-variant: small-caps;

所以我只是把它移到了子元素。 下面是 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 17

我能够通过直接转到链接（ https://fonts.googleapis.com/icon?family=Material+Icons ）并复制 CSS（即）来解决我的问题

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v129/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

将此 CSS 放入您网站最顶部的主样式文件中。 干杯。

Answer 18

确保您使用的是正确的文档。

版本 13.3.9：

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

版本 14.1.0：

<mat-icon fontIcon="home"></mat-icon>

Answer 19

我的问题是默认图标 class 已通过使用MatIconRegistry.setDefaultFontSetClass在app.module.ts中更改，所以我的<mat-icon>没有得到应用到它的material-icons class 。 在此处阅读有关此 function 的更多信息

Answer 20

我尝试了这里提到的一切。 对我有用的是在我的开发机器上启用 LAN 设置下的代理服务器。

Answer 21

疯狂的事情。 尝试了上述所有解决方案，但从未出现主页图标。 有用的是，将<mat-icon>中的文本从“Home”更改为“home” （注意大写字母“ H”为“home” ，小写字母“h”对我有用。

Answer 22

在 in.storybook 文件夹中创建 preview-head.html 并添加此链接[][1]

Answer 23

对我来说它不起作用，因为我没有在 app.modules.ts 文件中导入 Material 模块。

我刚刚在父模块文件的声明中添加了 MatIconModule 并且它起作用了。

Answer 24

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

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

Answer 25

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