角材料图标不起作用

99

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

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

我期待这样的事情：

预期

但是我得到这个：

实际

有任何建议吗？

angular  angular-material  angular-material2 
字体可能丢失。或稍后加载。
— Basavaraj Bhusani
@BasavarajBhusani我该如何检查？
从下面执行解决方案后，您应该清除浏览器缓存。它对我有用。
— Aditya Yada

Answers:

194

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

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

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

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

— 巴萨瓦拉吉·布萨尼（Basavaraj Bhusani）
source
10
这个答案对我有用，但是我也可以将此行添加到styles.css中，并且它可以工作。 @import 'https://fonts.googleapis.com/icon?family=Material+Icons';
— J. Chaney
20
您还可以添加：@import "~material-icons/iconfont/material-icons.css";您的styles.css
— Pooshon班纳吉
5
@PooshonBanerjee材质图标是Angular Material团队未维护的单独项目。
— Vedran
45

对于Angular 6+：

  1. npm安装此： npm install material-design-icons

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

    "styles": [
  "node_modules/material-design-icons/iconfont/material-icons.css"
]
— katwhocodes
source
1
这是正确的角度方法！
— 威尔特
1
...以及使用Angular for Apps时的正确方法（例如Cordova）
— CularBytes
这对我有用。我安装了Material Design，而不是使用Google API。
— 最多
29

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

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

如果您不想避免从Google提取图标，还可以按照“材料图标指南”中的说明自托管图标：

对于那些希望自行托管Web字体的用户，必须进行一些附加设置。将图标字体托管在某个位置，例如 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';
}
— 韦德兰
source
当图标未呈现而改为显示关闭文本时，遇到了问题。在我的scss文件中追加了以上导入，它开始显示“ X”图标。谢谢:)
— vinsinraw
我有angular 9项目，并且在.scss中导入材质图标字体文件后，仍然存在相同的问题，材质图标不可见，它在使用cordova创建的.apk文件中显示测试'visibility_off'。但是在localhost：4200上也可以正常工作，那么还有其他解决方案吗？
— Jignesh Gothadiya
13

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

.material-icons{
    font-family: 'Material Icons' !important;
}
— 格拉索维奇
source
11

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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
— 哈比尔
source
5

完整的解决方案可以是：

步骤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">
— YCF_L
source
2

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

— 马克·施卢珀
source
2

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

                    }
— 流浪者
source
谢谢！被困了几个小时！
— 哈瓦德·布林约瑟夫森（HåvardBrynjulfsen）
1

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

— 奥卢瓦贝米·卡德里（Oluwagbemi Kadri）
source
1

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

例如：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>
— 阿卜杜拉（M Abdullah）
source
0

如果您覆盖了某些现有的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>
— 佩杰曼·萨伯林
source
-2 
**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';
}
— 列克·拉吉（Lekh Raj）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.