角材质图标不起作用答案

【问题标题】：Angular Material icons not working角材质图标不起作用
【发布时间】：2018-04-12 12:12:32
【问题描述】：

我已经为 Angular 安装了 Material，

我已在我的应用程序模块 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>

我期待这样的事情：

但我明白了：

有什么建议吗？

【问题讨论】：

字体可能丢失。或者稍后加载。
@BasavarajBhusani 我该如何检查这个？
在执行下面的解决方案后，您应该清除浏览器缓存。它对我有用。

标签： angular angular-material angular-material2

【解决方案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

【讨论】：

这个答案对我有用，但我也能够将此行添加到 styles.css 并且它有效。 @import 'https://fonts.googleapis.com/icon?family=Material+Icons';
你也可以在你的styles.css中添加：@import "~material-icons/iconfont/material-icons.css";
@PooshonBanerjee material-icons 是一个单独的项目，不由 Angular Material 团队维护。

【解决方案2】：

对于 Angular 6+：

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

将样式添加到 angular.json：

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

【讨论】：

这是正确的角度方式！
...以及使用 Angular for Apps 时的正确方法（如 Cordova）
这对我有用。我没有使用 google api，而是安装了材料设计。

【解决方案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 字体样式表的一部分，但需要自托管字体时手动包含在您的项目中：

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

【讨论】：

在未呈现图标而是显示关闭文本时面临问题。将上述导入附加到我的 scss 文件中，它开始显示“X”图标。谢谢:)
我有 Angular 9 项目，在 .scss 中导入材质图标字体文件后，仍然存在同样的问题，材质图标不可见，它在使用 cordova 创建的 .apk 文件中显示测试“visibility_off”。但在 localhost:4200 中同样可以正常工作那么还有其他解决方案吗？

【解决方案4】：

在我的例子中，应用了一种覆盖字体系列的样式。所以，我像这样明确地添加了字体系列样式：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案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">

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

您可以通过两种方式导入材质图标。一种是在项目的主 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 文件中。

【讨论】：

【解决方案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';

                    }

【讨论】：

【解决方案11】：

我意识到在将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

【讨论】：

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

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

<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

【讨论】：

【解决方案14】：

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

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

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

【讨论】：

【解决方案15】：

如果您覆盖了一些现有的 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>

【讨论】：

【解决方案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';
}

【讨论】：