fix(icon): large SVG files can cause icon caching to hang

[Splaktar]

PR Checklist

Please check that your PR fulfills the following requirements:

• The commit message follows our guidelines
• Tests for the changes have been added or this is not a bug fix / enhancement
• Docs have been added, updated, or were not required

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Large SVGs (170KB+) can cause the current caching RegEx code to hang and use 100% CPU for a long amount of time, freezing the app.

Issue Number:
Fixes #11651. Relates to #8689. Relates to #11342. Relates to #11635.

What is the new behavior?

No more hangs processing large cached SVGs

• use querySelectorAll as much as possible
• reduce the use of RegEx on large chunks of DOM

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

The reporter added a demo full of various SVGs in a dialog. I verified that these changes fix all of those SVGs.

[Splaktar]

I've finished my testing on IE11.

I had to tweak it to use referencingElement.textContent = angular.element(svgElement)[0].innerHTML; instead of referencingElement= angular.element(svgElement)[0]; as this wasn't updating the DOM.

There seem to be some other issues, possibly SVGs that don't well support IE11, with 5 of the supplied SVGs in the CodePen above. The first time that many of them are displayed in IE11, they are black silhouettes. The second time when loaded from the cache (after this fix), they render properly with their full textures and colors. I compared the SVG structure in the DOM and there were no changes before/after that would explain this behavior.

I tested this with 1.1.10 and the same images were black. However, the second time they are displayed, they remained black.

So as far as I can tell, md-icon SVG support in IE11 will be improved by this change 😄