I have registered some svg's in app.component
public static MAT_ICONS_TO_REGISTOR: { name: string, url: string }[] = [
{name: 'broom', url: '../assets/imgs/broom.svg'},
{name: 'sources-icon', url: '../assets/imgs/camera_in.svg'}
];
AppComponent.MAT_ICONS_TO_REGISTOR.forEach(icon => {
this.matIconRegistry.addSvgIcon(icon.name,
this.domSanitizer.bypassSecurityTrustResourceUrl(icon.url));
});
But its not loaded on component init when *ngIf exists, ex:
<div *ngIf="!isApproval">
<mat-icon svgIcon="broom"
(click)="onResubmitAction()">
</mat-icon>
</div>
In this case when the condition becomes true a get request will be sent to get the icon from assets ('http://localhost:4200/assets/imgs/broom.svg') but it should load it on component init.
When using *ngIf, the element will not be rendered until the condition inside is true. It seems like mat-icon does not start a request to load a new icon until rendered, so in order to load an icon you need to render mat-icon. If you want your element to be not visible but still rendered, you can use the hidden attribute:
<div [hidden]="isApproval">
<mat-icon svgIcon="broom"
(click)="onResubmitAction()">
</mat-icon>
</div>
hidden does not work when the display CSS property of the element to hide is overwritten at some point. So it is safer to add the following global style:
[hidden] {
display: none !important;
}