icon: multiple SVGs on a page should have unique IDs

[coennijhuis]

BUG:

When adding multiple identical SVGs to a page, they should all have unique IDs.

CodePen and steps to reproduce the issue:

CodePen link: https://codepen.io/anon/pen/jpxBZx

Issue: All IDs for the icons are the same

Detailed Reproduction Steps:

1. Click the CodePen link
2. Check the icons in the preview pane. There are 5 identical icons.
3. Open developer toolbar (in your browser of choice)
4. Inspect the icons.
5. Check the ID inside the g tag are all the same. (these should all be unique)

What is the expected behavior?

The expected behavior is that all the IDs in the tags are unique.

What is the current behavior?

The current behavior is that the IDs are all the same

What is the use-case or motivation for changing an existing behavior?

Accessibility standards state that an ID should only be used once in page. (WCAG)

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.7.2
• AngularJS Material: 1.1.10
• OS: all
• Browsers: all

Is there anything else we should know? Stack Traces, Screenshots, etc.

NA

[Splaktar]

Duplicate of #8689, but that one did not include a CodePen demo, so thank you very much for that. I'll copy the link to the CodePen over to that issue.

It looks like the proposed PR fix in #11342 does not solve the problem in this CodePen. I'll investigate some more.