Не удается загрузить иконку углового материала из-за ошибки синтаксического анализа

Question

Я пытаюсь загрузить пользовательский значок SVG с угловым материалом 7.2.0 и
angular v7.2.0

Поэтому я регистрирую значок как

iconRegistry.addSvgIcon('box',
  sanitizer.bypassSecurityTrustResourceUrl('assets/box.svg'));

Затем яиспользуйте значок как

<mat-icon  svgIcon="box"></mat-icon>

, но значок не отображается.
В консоли я вижу ошибку Error retrieving icon: Http failure during parsing for http://localhost:4200/assets/box.svg.

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

iconRegistry.getNamedSvgIcon('box')
.subscribe(res => console.log(res), err => console.error(err))

Теперь я вижу, что фактическая ошибка содержит Unexpected token < in JSON at position 0, поэтому кажется, что angular пытается проанализировать SVG как Json.

Это ошибка или я что-то неправильно настроил?Я также проверил заголовки ответа и правильный тип содержимого для SVG.

Answer 1

Я только что изменил ваш код,

addSvgIcon регистрирует наш значок, принимая 2 аргумента, первый из которых представляет собой метку значка, которая имеет тип string.

Второй аргументотносительный путь URL, указывающий на местоположение значка.Это типа SafeResourceUrl.Чтобы разобрать строку пути URL в SafeResourceUrl, мы можем использовать DomSanitizer, предоставляемый Angular.

import

import { MatIconRegistry } from "@angular/material/icon";
import { DomSanitizer } from "@angular/platform-browser";

В конструкторе

  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
     this.matIconRegistry.addSvgIcon(
     "meeting",
    this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/meetingicon.svg")
    );
  }

Html

<mat-icon svgIcon="meeting"></mat-icon>