Angular 项目的自托管材料图标版本 4

Question

一些基于 Web 的项目旨在在本地网络内部运行，无需访问开放的互联网。从安全的角度来看，很合乎逻辑。对于此类内部应用程序，设计师需要自行托管 angular/google 材质图标。使用 npm 安装时，会显示旧图标，但不会显示新图标。 npm 版本比较老了，好多年没更新了。

官方文档：Setup Method 2. Self hosting 将指向：icon font，但是我没有看到任何必需的 woff/woff2 文件。 这不是一个完整的答案。

在我寻找解决方案的过程中，我只看到一堆半成品的答案和一群（理所当然地）沮丧的寻求者。

请任何人提供一个直接且实际工作的完整步骤，以使最新的材料图标在自托管背景上工作？非常感谢。

Answer 1

在本地托管 Google Material 图标字体：Here

最简单的方法：

1. npm i material-icons（用于自托管材料设计图标的最新图标字体和 CSS。）

2. 样式：

A) 在你的 angular.json 中：

  "architect": {
        "build": {
          "builder": ...,
          "options": {
          ....
          "styles": [
              ...
              "src/styles.scss",
              "./node_modules/material-design-icons/iconfont/material-icons.css",
              ...
            ],
             
            "scripts": []
          },

或 B）在你的styles.scss中：

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