Components: Only the first svgIcon appears when registered with MatIconRegistry

[aliasbody]

What is the expected behavior?

When we register 2 or more icons with MatIconRegistry we should, when called, see them all

What is the current behavior?

Only the first one appears

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

Register two icons on app.module or in a parent component (like app.component)

 constructor(
    public matIconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    this.matIconRegistry.addSvgIcon('svg-google', sanitizer.bypassSecurityTrustResourceUrl('/assets/logos/svg-google.svg'));
    this.matIconRegistry.addSvgIcon('svg-asana', sanitizer.bypassSecurityTrustResourceUrl('/assets/logos/svg-asana.svg'));
  }

And then in the HTML component simply call them one after the other

<mat-icon svgIcon="svg-google"></mat-icon>
<mat-icon svgIcon="svg-asana"></mat-icon>

The result is this:

If we invert the order like this:

<mat-icon svgIcon="svg-asana"></mat-icon>
<mat-icon svgIcon="svg-google"></mat-icon>

The result is this:

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

Angular 7.2.1
Material 7.2.1
TypeScript 3.1.6
Browsers (Chrome and Firefox, latest)

[crisbeto]

Can you post an example that shows it breaking? We have something similar in our dev app and it seems to work. It also might be a case of some resources in the two icons having the same id.

[aliasbody]

@crisbeto Here is the example:
https://material2-issue-15045.stackblitz.io

It's having exactly the same issue, you can see it by reordering the icons on the app.component.html, the first one appears and the second one won't.

[christianlundberg]

I can confirm the same thing happened to me. I was only able to register a single svg. Once I registered multiple ones, all the mat-icon components rendering svgs would render the exact same svg, usually the second registered one. Checking the network tab, they were making correct requests, so I'm not sure what the problem was. I had to go back to use material icons.

[jelbourn]

@aliasbody looking at the stackblitz, the icon is indeed being put in the DOM. It seems like it might be a problem with the SVG itself?

[aliasbody]

@jelbourn

Here is the result: https://material2-issue-15045.stackblitz.io/

• The first line is the same svg (from inkscape) but loaded with img as you can see, both are visible.
• The second line is the same svg (from inkscape) but loaded with mat-icon and svgIcon (don't load all)
• The third line is a "simplified" svg from Inkscape (to ressemble a little bit more the ones I've found in the internet, but loaded with svgIcon, same issue
• The fourth line is icons I've found in the internet and that seem to load correctly.

This seems to be a bug in mat-icon since the img one work perfectly.

[crisbeto]

@aliasbody the issue might be due to some of your icons having duplicate IDs. E.g. both the Google and Asana logos have a gradient with an id === 'a'. This isn't an issue when loading through an img tag, because the SVG elements aren't added to the DOM.

[forssri]

Faced the same issue today, and found infact the id references in the svgs were the problem. We need to ensure the id and path references inside each of the svg is unique.

[jelbourn]

@aliasbody could you check that the duplicate IDs are the issue?

[ZumelzuR]

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

[HiranyaKireety28]

Hi All,

I am facing the same issue and I changed the svg ids. It didn't help. Can someone please help

[ZumelzuR]

Can you copy the code? Maybe you are missing something.

[aliasbody]

Changing** the ID's didn't solved it for me.
It was indeed solved by changed the ID (Inkscape just uses the same ID everywhere). Another problem that may arise (I had it myself) was when having some "bad words" like Google Ads on a svg file and then having adblock enabled. Disabling adblock solved the issue here as well.

[angular-automatic-lock-bot[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._}