svg mat-icon doesn't render correctely

Question

I have a simple div where i display three different icons that have different colors.

Acctualy icons are displayed, but it shows all the time the same icons either attention-warning or attention-error icon, knowing that the html code contains different icons depending on the condition.

Here i have an example where the second icon should be an attention-warning icon (yellow) but it display an attention-error icon (red) instead.

I have tested my code in both browsers, Chrome and Edge and i get same result (all red or all yellow).

Bellow code generated.

Any help please to fix this problem.

Here is my code in stackblitz

The icons should be in this color

Answer 1

The problem comes from my SVG, they have same ids after changing those ids the icons displayed perfectely as expected.

Before:

After :