Using different SVG's but loading the same one

[pachidev]

I'm loading 4 different SVG icons dynamically in the component constructor.

When I use them in the HTML the first one is the only well rendered.

In this example, I set those four and right after I put the same ones but using an tag:

The result is:

[czeckd]

I've not been able to reproduce this. In the demo app, what I've done:

  constructor(private registry: SvgIconRegistryService) {
    this.registry.loadSvg('assets/images/eye.svg', 'eye.icn');
    this.registry.loadSvg('assets/images/moon-o.svg', 'moon.icn');
  }

And in the template:

<div class="portal">
    <svg-icon name="eye.icn"></svg-icon>
    <svg-icon name="moon.icn"></svg-icon>
</div>

And both the eye svg and moon svg load as expected.

[pachidev]

I found the problem. All the SVGs I was provided have the same ids (they're around 50):

So the problem is when trying to load multiple ones with the same ID.
Not sure if it's your business though 😅
Thank you 👍