He registrado algunos svg en 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)); });Pero no está cargado en el componente init cuando existe *ngIf, por ejemplo:
<div *ngIf="!isApproval"> <mat-icon svgIcon="broom" (click)="onResubmitAction()"> </mat-icon> </div>En este caso, cuando la condición se vuelve verdadera, se enviará una solicitud de obtención para obtener el ícono de los activos ('http://localhost:4200/assets/imgs/broom.svg'), pero debería cargarlo en el componente init.
Al usar *ngIf , el elemento no se representará hasta que la condición interna sea verdadera. Parece que mat-icon no inicia una solicitud para cargar un nuevo ícono hasta que se procesa, por lo que para cargar un ícono, debe generar mat-icon . Si desea que su elemento no sea visible pero aún así se represente, puede usar el atributo hidden :
<div [hidden]="isApproval"> <mat-icon svgIcon="broom" (click)="onResubmitAction()"> </mat-icon> </div> hidden no funciona cuando la propiedad display CSS del elemento a ocultar se sobrescribe en algún momento. Por lo tanto, es más seguro agregar el siguiente estilo global:
[hidden] { display: none !important; }