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>

使用Github SVG创建自定义材质图标

更新

1 个答案: