Adding SVG icons
SVG icons should be added to a common iconset, or an iconset for your WebUI.
These can be custom SVG icons or copies of Polymer's
Creating an iconset
To create the iconset your WebUI will use, copy the format of an existing icons
Change the name of the
iron-iconset-svg for your WebUI, and add the SVGs you
need (see below). Example:
<iron-iconset-svg name="downloads" size="24"> <svg> <defs> <g id="foo">...</g> ... </defs> </svg> </iron-iconset-svg>
Adding icon definitions
For Polymer icons from iron-icons:
- Find the SVG
<g>icon definitions you need in PolymerElements/iron-icons.
- Copy the SVG definitions.
- Insert each line (alphabetically) into the appropriate
icons.htmlfile for your WebUI. (For commonly used icons, use
For custom icons:
You can include custom icons or Google Material
icons in the same iconset, but mention their
source in a comment. Icons exported from GUI tools often are messy; please
minify custom icons by flattening transforms, removing meta tags like
<title>, and rounding weird numbers like 30.0002118. The SVGOMG
optimizer does most of this for you;
If the icon is not the same size as the iconset, either scale it to size, or
<g id="foo"> tag includes the
viewBox attribute with the original
dimensions. Some code (settings) has multiple iconsets (e.g. "cr" vs. "cr20")
depending on the export size. You can skip the viewBox if you put the icon in
the right set.
Unless color is important (e.g. a Chromium logo), remove hard-coded colors
fill="#000") so our WebUI can specify colors in CSS.
Import the relevant
icons.html from your UI instead of importing Polymer's
iron-icons.html (which would load almost a thousand SVGs).
Use the icon in your UI with your custom iconset name prefix wherever you need
an icon name (
<link rel="import" href="chrome://downloads/icons.html"> <iron-icon icon="downloads:warning"></iron-icon>
A few icons are used in many pages. These can be found in
under the iconset name "
cr". Having frequently-used icons here prevents
excessive duplication of SVG definitions while keeping imports small across all
To use these icons, simply import
cr_elements/icons.html and use the
<link rel="import" href="chrome://resources/cr_elements/icons.html"> <iron-icon icon="cr:cancel"></iron-icon>