检索图标时出错：无法在“XMLHttpRequest”上执行“打开”：URL 无效答案

【问题标题】：Error retrieving icon: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL检索图标时出错：无法在“XMLHttpRequest”上执行“打开”：URL 无效
【发布时间】：2019-12-01 05:17:09
【问题描述】：

我正在尝试将图标添加到 matIconRegistry 并在 mat-icon 中使用它

在应用组件中

constructor(
   private _matIconRegistry: MatIconRegistry,
   private _domSanitizer: DomSanitizer,
){
   _matIconRegistry
          .addSvgIcon('notification', this._domSanitizer.bypassSecurityTrustResourceUrl('../assets/svg/icon_notification.svg'));
 }

我也试过这样，

 _matIconRegistry
      .addSvgIcon('notification', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/svg/icon_notification.svg'));

}

在我的组件中

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

但它在控制台中抛出错误

检索图标时出错：无法在“XMLHttpRequest”上执行“打开”：无效的 URL

【问题讨论】：

您能否提供一个重现该问题的 stackblitz 演示？

标签： angular angular-material

【解决方案1】：

实际上是由于拦截器导致的问题，解决方案可以在以下链接中找到：

拦截器正在阻止注册表中的“.svg”图像。

https://github.com/czeckd/angular-svg-icon/issues/37

【讨论】：

【解决方案2】：

在我的AppComponent 中，我正在使用这种方法，请注意'./assets...' 符号，因为assets 目录与AppComponent 处于同一层次结构级别。

registerSvgIcon(name: string): void {
    this.matIconRegistry.addSvgIcon(name, this.domSanitizer.bypassSecurityTrustResourceUrl('./assets/svg-icons/' + name + '.svg'));
}

【讨论】：

感谢您的回答。实际上我的拦截器阻止了我