Trying to create a unique custom SVG mat-icon by loading the SVG directly from Github. My initial attempt using DomSanitizer was documented in this article, and it successfully loaded the SVG via HttpClient.
Now, I am attempting to achieve this directly through DomSanitizer as follows:
constructor (private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer) {
this.matIconRegistry.addSvgIcon(
"logo",
this.domSanitizer.bypassSecurityTrustResourceUrl("https://raw.githubusercontent.com/fireflysemantics/logo/master/l1.svg"));
}
To test the rendering, I added the following code in app.component.html:
<mat-icon>logo</mat-icon>
However, the SVG is not displaying. It's expected that the line:
this.domSanitizer.bypassSecurityTrustResourceUrl("https://raw.githubusercontent.com/fireflysemantics/logo/master/l1.svg"));
Should load the SVG, but no request appears in the network tab. Even when pasting the direct URL into the browser address bar:
https://raw.githubusercontent.com/fireflysemantics/logo/master/l1.svg
The request shows up as l1.svg in the network tab.
Any thoughts or suggestions?
Update
The provided Stackblitz now includes the fix suggested in the answer, and the custom icon is working correctly!