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

Question

我使用自定义 svg 作为 mat-icon 的图标，但无法让它正确检索图标。如果我将它放在应用程序文件夹( Assets )旁边的文件夹中，它就可以工作，但它不适用于其他位置。我希望它专门针对与 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

您可以使用以下路径来完成:

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