如何让 matIconRegistry.addSvgIcon 找到正确的路径

Question

我使用自定义 svg 作为 mat-icon 的图标，但无法正确检索图标。如果我将它放在应用程序文件夹（资产）旁边的文件夹中，它可以工作，但它不适用于其他位置。我希望它专门用于与 icon.module 位于同一文件夹中的图标以及作为 src 兄弟的文件夹。我怎样才能做到这一点？我不知道为什么它不起作用..

这里是 icon.module.ts：

import { NgModule } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { MatIconRegistry, MatIconModule } from '@angular/material/icon';
@NgModule({
  imports: [MatIconModule]})
export class IconModule {
  private path = '../../script/icons';
  private path2 = '../assets/icons';
  private path3 = 'app/icons';

  constructor(
    private domSanitizer: DomSanitizer,
    public matIconRegistry: MatIconRegistry ) {
    this.matIconRegistry
      .addSvgIcon('base1', this.setPath(`${this.path}/bp.svg`))
      .addSvgIcon('base2', this.setPath(`${this.path2}/bp.svg`))
      .addSvgIcon('base3', this.setPath('src/app/icons/bp3.svg'));
      //.addSvgIcon('base', this.setPath('bp2.svg'));
  }
  private setPath(url: string): SafeResourceUrl {
    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

Answer 1

您应该在projects.<your-project-name>.architect.build.options.assets 数组中包含您的angular.json 文件中可以包含svg 图标的其他文件夹。这应该可以帮助您解决问题。

Answer 2

你可以用路径来做：

.addSvgIcon('base4', this.setPath('assets/icons/bp4.svg'));