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

Question

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

官方文档：设置方法 2。自托管将指向： 图标字体，但是我没有看到任何必需的 woff/woff2 文件。这不是一个完整的答案。

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

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

标签： angulargoogle-material-icons

Answer 1

在本地托管 Google Material Icon 字体：这里

最简单的方法：

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';