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

[mrkpks]

What is the expected behavior?

Have different icons rendered for each 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.

[ViktorSlavov]

@mrkpks
I made a stackblitz sample based on your use case and could not reproduce the issue (without using Ionic). Doesn't seem like an issue with material itself.

[jelbourn]

@mrkpks can you share a full reproduction?

[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 id, 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)
#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 tag and changed its id to a unique character, Ex:
   <mask id="i" .... >

2. Then look for a tag with "mask" attribute and change it to your previously given character:

[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 tag and changed its id to a unique character, Ex:
   <mask id="i" .... >

2. Then look for a tag with "mask" attribute and change it to your previously given character:

[tientranorientsoftware]

@mrkpks
I have the same issue and I can confirm that the problem was the duplicate ID, yo have to be sure that the id, 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)
#15045

It is work for me, thanks

[mmalerba]

It sounds like the issue has been resolved

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}