角度材质图标不起作用
Posted
技术标签:
【中文标题】角度材质图标不起作用【英文标题】：Angular Material icons not working 【发布时间】：2018-09-22 14:04:49 【问题描述】：我已经为 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 我该如何检查这个？ 在执行下面的解决方案后，您应该清除浏览器缓存。它对我有用。 【参考方案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】：如果您覆盖了一些现有的 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>
【讨论】：
【参考方案15】：**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';
【讨论】：
以上是关于角度材质图标不起作用的主要内容，如果未能解决你的问题，请参考以下文章