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

Question

Attempting to create a custom SVG mat-icon loading the SVG directly from Github. I first tried this using the DomSanitizer and documented the result in this article . So the SVG does load via the HttpClient .

Now I'm trying to do it directly via the DomSanitizer like this:

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

And doing a rendering test in app.component.html :

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

And there's no SVG showing up. I'm assuming that the line:

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

Should load the svg, but I don't see a request in the network tab. Also if we just paste the raw URL into the browser address bar:

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

The request does show up in the network tab as l1.svg .

Thoughts?

Stackblitz

Update

The above Stackblitz includes the fix from the answer, so it works now!

Answer 1

The entry in app.component.html must look as follows:

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