Angular库中添加Material自定义图标：路径指向库资产的问题

步骤1：配置库的Assets打包 #

先确保打包库时会把SVG图标包含进去。打开库根目录下的ng-package.json，添加assets配置项，指定SVG所在的目录：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/你的库名称",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": [
    "./assets/icons" // 替换成你实际存放SVG的目录，比如src/assets/icons就写./assets/icons
  ]
}

配置完成后执行库的打包命令（如ng build 你的库名称），SVG会被打包到库的dist目录下对应assets文件夹中。

步骤2：修改图标注册的路径 #

别再用指向主应用根路径的./info.svg，改用以下两种方式之一：

方式一：利用require导入（推荐） #

直接通过require导入SVG文件，webpack会自动处理正确路径：

constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
) { 
    // 替换为你库中SVG的实际相对路径
    const infoIconUrl = require('../assets/icons/info.svg').default;
    this.matIconRegistry.addSvgIcon('info', this.domSanitizer.bypassSecurityTrustResourceUrl(infoIconUrl));
}

方式二：构建库的asset绝对路径 #

如果不想用require，可通过document.baseURI结合库的asset路径构建：

constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
) { 
    // 假设库的SVG打包后在 assets/icons/info.svg
    const iconPath = `${document.baseURI}assets/icons/info.svg`;
    this.matIconRegistry.addSvgIcon('info', this.domSanitizer.bypassSecurityTrustResourceUrl(iconPath));
}

验证 #

打包库并在主应用中引入后，查看网络请求，SVG请求应指向主应用下的对应asset路径，说明配置生效。

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