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

【问题标题】：Creating an custom mat-icon with Github SVG使用 Github SVG 创建自定义 mat-icon
【发布时间】：2020-01-27 03:26:54
【问题描述】：

尝试创建自定义 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 包含答案中的修复，所以它现在可以工作了！

【问题讨论】：

标签： javascript angular typescript svg angular-material

【解决方案1】：

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

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

【讨论】：