'Multiple mat-icon registry in Angular 7

When I tried Multiple icons, icon which I given First in <mat-icon> tag is repeating for all mat-icon tag.

constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {
 
     this.matIconRegistry.addSvgIcon('downld', this.domSanitizer.bypassSecurityTrustResourceUrl('./assets/images/DownloadCloud.svg'));
     this.matIconRegistry.addSvgIcon('match', this.domSanitizer.bypassSecurityTrustResourceUrl('./assets/images/Match.svg'));
     this.matIconRegistry.addSvgIcon('openfile', this.domSanitizer.bypassSecurityTrustResourceUrl('./assets/images/OpenFile.svg'));
  }
<mat-icon svgIcon="match"></mat-icon>
<mat-icon svgIcon="openfile"></mat-icon>
<mat-icon svgIcon="downld"></mat-icon>

Output



Solution 1:[1]

Correct method below

this.matIconRegistry 
.addSvgIcon('downld',this.domSanitizer.bypassSecurityTrustResourceUrl('./assets/images/DownloadCloud.svg') 
.addSvgIcon('match', this.domSanitizer.bypassSecurityTrustResourceUrl('./assets/images/Match.svg') 
.addSvgIcon('openfile', this.domSanitizer.bypassSecurityTrustResourceUrl('./assets/images/OpenFile.svg') );

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 simon thismyvoice