ID's of iron-icons break other functions that use the same ID in Polymer 3

[NickdeK]

Description

The iron-icons element prevents functions from other elements on the page with the same id from working.

Expected outcome

iron-icons to be scoped inside it's own component and not being put into the lightdom where it can be accessed by other functions/elements that use a querySelector.

Actual outcome

When using iron-icons@3.0-preview (to be used with Polymer 3) the icons get placed in the head with the <g id="search">...</g> directly in the dom. Any other elements or non-webcomponents functions that use the same id for a querySelector will get the iron-icon instead.

Live Demo

Can't create a demo right now (no online editor seems to support Polymer 3?)

Steps to reproduce

1. Put a iron-icon element in the page.
2. Put a other non-polymer element in the page that uses a querySelector that matches the id of a the iron-icon icon used
3. The non-polymer element querySelector returns the iron-icon g element with the matching ID

Browsers Affected

Have not checked all browsers, but is effecting Chrome at least (and probably all other browsers).

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10