角度材质图标不工作

我已经安装了材料的角度,

我已经导入了我的应用程序模块 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>

我期待着这样的事情:

expected

但我明白:

actual

有什么建议吗？

190406 次浏览
小开
最佳答案

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

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

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

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

小开

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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
小开 
**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';
}
小开

我意识到在导入到你的应用程序之前，没有人一开始就提到要安装锤子 Js。对于有类似问题的人，你需要先导入锤子 J，你可以使用 NPM，纱或谷歌 CDN 的安装。这个答案适用于 NPM 或纱线的安装:

NPM

npm install --save hammerjs

纱线

yarn add hammerjs

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

import 'hammerjs';

如果你更喜欢使用谷歌 CDN 请访问更多的解释 https://material.angular.io/guide/getting-started角材料

小开

如果使用 SASS，您只需要将这一行添加到您的主 .scss文件:

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

如果你喜欢避免从谷歌抓取图标，你也可以自己主持的图标，如 材质图标指南所述:

对于那些希望自己托管网络字体，一些额外的设置是 例如，将图标字体放在某个位置 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 规则需要为 声明以正确呈现字体 作为 GoogleWebFont 样式表的一部分，但是需要 在自托管字体时手动包含在你的项目中:

.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">
小开

在我的情况下，图标没有显示，因为我已经搞砸了我的字体使用！很重要。把它取出来，就会出现图标。

小开

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

你可在此查阅正确的姓名: Https://material.io/tools/icons/?style=baseline

小开

我遇到了图标不能为我显示的问题。我遵循了巴萨瓦拉杰 · 布萨尼提供的步骤，但仍然没有奏效。

我发现问题在于，在我的 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';


}
小开

角度6 + :

  1. Npm 安装: npm install material-design-icons

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

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

在我的例子中，应用了一种重写字体系列的样式。因此，我明确地添加了字体系列样式，如下所示:

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

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

对我来说，它是字体变体: 小写字母;

所以我只是把它移动到子元素。下面是角度材质网格的一部分。

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

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

例如 : 材质图标为

enter image description here

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

但它出现了

enter image description here

解决方案: 我们必须使用 < strong > filter _ list _ alt 漏斗类型的图标作为

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

可以通过两种方式导入 物质图标。一种是导入项目中主 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 文件。 enter image description here

小开

首先，请考虑您需要在项目中插入风格:

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

如果问题没有解决，我猜你是用另一种字体，也添加！重要的字体，请尝试添加这个 CSS 类到 style.CSS (或 style.scss) ，这是一般/公共 CSS:

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

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

小开

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

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

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

小开

  • 首先安装角材料使用-

    npm i @angular/material

  • 在 Style.css文件只是复制和粘贴-

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

  • 然后按照下面的指示进入 应用程序模块

     import { MatIconModule } from '@angular/material/icon';


imports: [
BrowserModule,
MatIconModule,
................
],

  • 在 App.Component. html文件只是复制和粘贴下面的代码-

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

  • 然后砰的一声，对我有用，我希望能帮到你。

小开

我能够通过直接访问链接(https://fonts.googleapis.com/icon?family=Material+Icons)并复制 CSS (即 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 放到你网站最上面的主样式文件中，干杯。

小开

确保您使用的文档正确。

版本13.3.9:

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

版本14.1.0:

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

小开

我的问题是使用 MatIconRegistry.setDefaultFontSetClass在 app.module.ts中更改了默认的图标类，所以我的 <mat-icon>没有得到应用到它的 material-icons类。阅读更多关于这个函数 给你的信息

小开

我尝试了这里提到的所有方法。对我有效的方法是在我的开发机器上启用局域网设置下的代理服务器。

小开

疯狂的事。 尝试了以上所有的解决方案，但主页图标从未出现。 什么工作是，改变 <mat-icon>内的文字从 “家”(观察大写 H到 “家”与小写 H为我工作。


提交答案