Please use custom-iconsets for iron icons

[Michael Giuffrida]

TL;DR: To save size in Chrome, please include only the icons you need in your app rather than import from iron-icons. Documentation here.

We've decided to remove iron-icons from Chrome. While they're super convenient, these files contain almost 1,000 icons (SVG definitions), or up to 230 KB that we have to import when loading WebUI. Loading just one file, like iron-icons.html, can bring in hundreds of icons we don't need. We recently removed 287 lines from vulcanized Downloads by removing this import.

If you're working on a WebUI page, please follow these steps:

1. Remove imports of iron-icons/*.
2. If you use icons that are available in cr_elements/icons.html, import that file and reference those icons via "cr:icon-name".
3. If you use icons not available in the "cr" iconset, create a custom iconset for your app. Go to https://poly-icon.appspot.com and select the icons you need; copy the SVG definitions into your iconset and include the poly-icons URL you created as a comment. Then switch your <iron-icon> icons, e.g. from "icons:foo" to "settings:foo" (same with paper-icon-button, etc.).

If an icon is used in other WebUI pages, consider adding it to the "cr" iconset instead of your page-specific iconset. We're balancing keeping the "cr" iconset small (to lighten the load for all pages) while including commonly used icons (to avoid excessive duplication).

Feel free to send me any feedback or code reviews related to this. If you've already launched a Polymer WebUI page and gone to maintenance mode, let me know if you'd prefer me to do this work instead.

Thanks,

Michael

[Michael Giuffrida]

Ugh, I mean of course to use the iron-iconset-svg element to define your iconsets.

"custom-iconset" from the subject line is not a thing, I just meant "custom iconsets". Sorry if that was confusing.