[mat-icon] svgIcon renders the same icon for multiple resources

What is the expected behavior?

Have different icons rendered for each <mat-icon> with different svgIcon value

What is the current behavior?

All icons are rendered as my_icon1.svg.

If I change order in html file f.e.:

<mat-icon svgIcon="my_icon2"></mat-icon>
<mat-icon svgIcon="my_icon1"></mat-icon>
<mat-icon svgIcon="my_icon3"></mat-icon>

-> all icons are rendered as my_icon2.svg, so it seems that it takes just the first svgIcon resource and renders it for all components in current view (even for nested components).

What are the steps to reproduce?

app.component.ts

import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';
...
constructor(
    private readonly matIconRegistry: MatIconRegistry,
    private readonly sanitizer: DomSanitizer,
  ) {
    this.matIconRegistry.addSvgIcon('my_icon1', this.sanitizer.bypassSecurityTrustResourceUrl('assets/icons/my_icon1.svg'));
    this.matIconRegistry.addSvgIcon('my_icon2', this.sanitizer.bypassSecurityTrustResourceUrl('assets/icons/my_icon2.svg'));
    this.matIconRegistry.addSvgIcon('my_icon3', this.sanitizer.bypassSecurityTrustResourceUrl('assets/icons/my_icon3.svg'));
}
...

app.component.html

<mat-icon svgIcon="my_icon1"></mat-icon>
<mat-icon svgIcon="my_icon2"></mat-icon>
<mat-icon svgIcon="my_icon3"></mat-icon>

app.module.ts

import { HttpClientModule } from '@angular/common/http';
import { MatIconModule } from '@angular/material';

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI: 7.2.3 Node: 10.14.1 OS: win32 x64 Angular: 7.2.2

Is there anything else we should know?

I’m using Ionic 4.9.0 for native mobile app development.

On all my previous projects this worked fine.

[ZumelzuR]

@mrkpks I have the same issue and I can confirm that the problem was the duplicate ID, yo have to be sure that the <path> id, <mask> id are different so my two svg are like

... <defs> <path id="a" d="M3.."/> </defs> <g fill="none" fill-rule="evenodd" transform="translate(13 33)"> <mask id="b" fill="#fff"> <use xlink:href="#a"/> </mask> <g fill="#303030" mask="url(#b)"> ... </g> </g> </svg> and I changed it to <defs> <pathid="g"d="M3.."/> </defs> <g fill="none" fill-rule="evenodd" transform="translate(13 33)"> <maskid=“h” fill="#fff"> <use xlink:href="#g"/> </mask> <g fill="#303030" mask="url(#h)"> ... </g> </g> </svg> and works for me. (I bolded the changes).

Hope that helps you

(same issue here) https://github.com/angular/material2/issues/15045

[pedy711]

The solution from @ZumelzuR worked for me. Make sure all of your svg files have different ids inside. Open your svg files one by one in an editor and do as follows:

1. Look for <mask> tag and changed its id to a unique character, Ex: <mask id="i" .... >

2. Then look for a <g> tag with “mask” attribute and change it to your previously given character: <g mask="url(#i)">