md-icon: svg <clipPath> no longer works

[mpiasta-ca]

After the commit 810c4f3, any svg with <clipPath id="..."> fails to render the clipPath, because line 433 @ "src/components/icon/js/iconService.js" removes all svg child id, but this id is required for clipPath to work.

Created after issue report: #7381

I tested with the change from 810c4f3, and here is screenshot to show the breaking change. In this example, the five square svg icons are actually supposed to appear as circles (the only reason the "Canada" icon works is because it doesn't use a clipPath).

Potential solution: instead of removing ID from the svg's child elements, need to prefix a random string to all child element id's at render (not at caching). If done at caching, issue 7381 will still persist (svg breaks when the icon is rendered more than once, because IDs are no longer unique [Firefox, IE]). So best to attach this random prefix string in <md-icon> right before the svg is rendered (one string that is attached to all IDs of that svg, so that they can still reference each other throughxml:link="..." and clip-path: url(#...)).

[devversion]

@mpiasta-ca I like the solution. This seems to be a elegant way.

[devversion]

The cached icons id's are now always prefixed with a incrementing prefix.

• 67bd35d