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 file (e.g., cr_elements/icons.html
). Change the name of the
for your WebUI, and add the SVGs you need (see below). Example:
<iron-iconset-svg name="downloads" size="24">
Adding icon definitions
For Polymer icons from iron-icons:
- Find the SVG
<g> icon definitions you need in PolymerElements/iron-icons. The poly-icon.appspot.com tool is also convenient.
- Copy the SVG definitions.
- Insert each line (alphabetically) into the appropriate
icons.html file 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; use it.
If the icon is not the same size as the iconset, either scale it to size, or ensure the
<g id="foo"> tag includes the
viewBox attribute with the original dimensions.
Unless color is important (e.g. a Chromium logo), remove hard-coded colors (e.g.
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">
A few icons are used in many pages. These can be found in
cr_elements/icons.html under the iconset name "
cr". Having frequently-used icons here prevents excessive duplication of SVG definitions while keeping imports small across all pages.
To use these icons, simply import
cr_elements/icons.html and use the
<link rel="import" href="chrome://resources/cr_elements/icons.html">