Question

（我为此https://github.com/angular/angular-cli/issues/2662引用此链接），我在angular.json中添加add css并导入库instyle.css（它给出了类似./src/styles.css（./node_modules/raw- loader！./ node_modules / postcss-loader / lib ??嵌入！./ src / styles.css）），在angular的本地项目中安装材质图标库的正确方法是什么？

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">

Answer 1

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

npm i material-icons

styles.css

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

Answer 2

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

npm install material-icons --save

然后将您的CSS库导入到您的Angular项目中，以编辑angular.json文件：

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

Answer 3

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

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

Answer 4

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

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

Answer 5

角度10+和材料10 +

如果使用此CLI ng add @angular/material，则无需执行任何操作。即开箱即用。

位置： index.html

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

如何在角度中包含材质图标库？

5 个答案: