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

Posted 2023-02-22

【中文标题】Angular 项目的自托管材料图标版本 4

【英文标题】：Self hosted material icons ver 4 for Angular projects

【发布时间】：2021-11-02 05:29:24

【问题描述】：

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

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

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

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

【参考方案1】：

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

最简单的方法：

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

样式：

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

【讨论】：

npm 安装版本：material-icons@1.2.1；您的链接指向文件夹：github.com/google/material-design-icons/tree/master/font。检查一下，它不包含以下引用的 woff/woff2 文件：'~material-icons/iconfont/material-icons.css'