Angular loading icon from material Registery is not preloaded

I have registered some svg’s in app.component

public static MAT_ICONS_TO_REGISTOR: { name: string, url: string }[] = [
    {name: 'galaxy-icon', url: '../assets/imgs/galaxy.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, 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.