如何在 Angular 中包含材质图标库？答案

【问题标题】：How to include material icon library in Angular?如何在 Angular 中包含材质图标库？
【发布时间】：2019-03-03 08:01:39
【问题描述】：

（为此我参考了这个链接Issue #2662），我在angular.json和import library instyle.css中添加了CSS，它给出了如下错误：

./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css)

在本地项目中安装材质图标库的正确方法是什么？

npm install material-design-icons-iconfont --save

angular.json

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

style.css

@import "~material-design-icons-iconfont/dist/material-design-icons";

index.html

<link href="../material-design-icons-iconfont/dist/fonts/" rel="stylesheet">

【问题讨论】：

可能与路径问题有关。 “样式”：[“src/styles.css”，“./node_modules/material-design-icons/iconfont/material-icons.css”，]，
您是否尝试使用链接标签在 index.html 中导入 css 文件？
请尝试告诉我
您是否在模块的导入中包含MatIconModule？
你需要加载css文件吧？。试试这个代码

【解决方案1】：

styles.css

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

【讨论】：

【解决方案2】：

只是想分享我解决此问题的经验。实际上，我在某个阶段使用!important 作为我的字体，后来意识到我的图标不起作用。一旦删除了重要的问题，我的问题就解决了，它又开始工作了。

注意：不要使用!important，除非确实有必要并且您知道自己在做什么

【讨论】：

【解决方案3】：

首先通过 npm 安装 material-icon 包：

npm install material-icons --save

然后在编辑 angular.json 文件的 Angular 项目中导入 CSS 库：

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

【讨论】：

【解决方案4】：

使用此链接解决了我的问题(https://www.npmjs.com/package/material-icons)

npm i material-icons

styles.css

@import '~material-icons/iconfont/material-icons.css';

【讨论】：

【解决方案5】：

尝试将此代码发布到您的 index.html 中：

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

【讨论】：

我对每个指向fonts.googleapis.com 的答案都投了反对票，因为 OP 在将字体嵌入到项目中很有趣。有些人在不喜欢外部内容的防火墙后面运行。例如。银行