如何在Angular库中正确导入Material Icons文件？

错误配置分析 #

你当前的配置存在几个关键问题：

1. tsconfig.lib.json 中配置 styles 无效：该文件是TypeScript编译配置文件，不负责样式和资源的打包处理，添加的样式项不会被Angular构建工具识别。
2. 字体路径配置错误：Angular 12+ 已不再推荐使用 ~ 前缀引用node_modules资源，且未正确设置字体文件的输出路径，导致字体无法被加载。
3. 资源未被纳入打包：字体文件（woff2等）未被配置为构建时需要复制的静态资源，最终会导致浏览器加载字体时出现404错误。

正确配置步骤 #

1. 修改 angular.json 中的库构建配置

找到你的库项目（foo-lib）的构建配置，添加 styles 和 assets 项，确保字体资源被正确复制到输出目录：

{
  "projects": {
    "foo-lib": {
      "architect": {
        "build": {
          "options": {
            // 其他配置...
            "styles": [
              "projects/foo-lib/src/lib/foo-lib.component.scss"
            ],
            "assets": [
              {
                "glob": "**/*",
                "input": "./node_modules/@material-design-icons/font",
                "output": "./assets/material-icons/"
              }
            ]
          }
        }
      }
    }
  }
}

2. 修正组件SCSS中的字体路径

更新 foo-lib.component.scss，移除 ~ 前缀，并将字体路径指向打包后的assets目录：

// 设置字体输出后的相对路径
$material-design-icons-font-path: '../assets/material-icons/';
// 导入Material Icons的样式
@import '@material-design-icons/font/outlined';

3. 保持模板的正确使用

你的模板代码是正确的，无需修改：

<span class="material-icons-outlined icon">fit_screen</span>

4. 重新构建库

执行构建命令，确保资源被正确打包：

ng build foo-lib

测试验证 #

如果需要在本地测试，可以创建一个测试应用导入该库：

1. 在工作区中创建测试应用：

ng generate application test-app

2. 在测试应用中导入 foo-lib 模块，并在组件中使用该库组件。
3. 启动测试应用，检查图标是否正常显示。

内容的提问来源于stack exchange，提问作者breach