javascript - 使用 Github SVG 创建自定义 mat-icon

Question

尝试创建自定义 SVG mat-icon 直接从 Github 加载 SVG。我首先尝试使用 DomSanitizer 和 documented the result in this article 。因此 SVG 确实通过 HttpClient 加载。

现在我尝试直接通过 DomSanitizer 执行此操作，如下所示:

  constructor (private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer) {
          this.matIconRegistry.addSvgIcon(
      "logo",
      this.domSanitizer.bypassSecurityTrustResourceUrl("https://raw.githubusercontent.com/fireflysemantics/logo/master/l1.svg"));
    }

并在app.component.html中进行渲染测试:

<mat-icon>logo</mat-icon>

并且没有显示 SVG。我假设该行:

this.domSanitizer.bypassSecurityTrustResourceUrl("https://raw.githubusercontent.com/fireflysemantics/logo/master/l1.svg"));

应该加载 svg，但我在网络选项卡中没有看到请求。另外，如果我们只是将原始 URL 粘贴到浏览器地址栏中:

https://raw.githubusercontent.com/fireflysemantics/logo/master/l1.svg

该请求确实在网络选项卡中显示为 l1.svg。

想法？

Stackblitz

更新

上面的 Stackblitz 包含了答案中的修复，所以它现在可以工作了!

Answer 1

app.component.html 中的条目必须如下所示:

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