如何在Angular中使用自定义材质图标

Question

我正在尝试在material.angular.io示例之后使用自定义SVG图标。我正在使用包含(600, 625)函数的服务。日志显示该函数在被调用时可以正常运行。

.TS：

initCustomIcons

HTML：

constructor(
        private matIconRegistry: MatIconRegistry,
        private domSanitizer: DomSanitizer
    ) { }

public initCustomIcons() {
        console.log('registered.');
        this.matIconRegistry.addSvgIcon(
            'file-pdf',
            this.domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/file-pdf.svg')
        );
        this.matIconRegistry.addSvgIcon(
            'file-excel',
            this.domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/file-excel.svg')
        );
        this.matIconRegistry.addSvgIcon(
            'file-delimited',
            this.domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/file-delimited.svg')
        );
    }

我得到如下所示的错误。我尝试了多种修复方法，但找不到任何有效的方法。任何帮助将不胜感激。

错误：

<button mat-raised-button color="primary" (click)="exportToPDF($event)" [disabled]="disabledBtn"> Export <mat-icon svgIcon="file-pdf"></mat-icon> </button>