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 iron-icons.

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 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. 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 cr_elements/icons.html.)

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.

Using icons

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 (iron-icon, paper-icon-button, etc.):

<link rel="import" href="chrome://downloads/icons.html">

<iron-icon icon="downloads:warning"></iron-icon>

Common icons

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 cr prefix:

<link rel="import" href="chrome://resources/cr_elements/icons.html">

<iron-icon icon="cr:cancel"></iron-icon>

Comments