Как использовать пользовательские иконки материалов в Angular - PullRequest
Новая
       9

Как использовать пользовательские иконки материалов в Angular

0 голосов
/ 05 сентября 2018

Я пытаюсь использовать пользовательские значки SVG, следуя примеру material.angular.io. Я использую сервис, который содержит функцию initCustomIcons. Журнал показывает, что функция работает правильно при вызове.

.TS: 

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')
        );
    }

HTML: 

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

Я получаю ошибку, показанную ниже. Я пробовал разные способы исправить это, но я не могу найти ничего, что работает. Любая помощь будет оценена.

ОШИБКА: 

Error retrieving icon: Unable to find icon with the name ":file-pdf"
...