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 iconsetTo 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 definitionsFor Polymer icons from iron-icons:
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 iconsImport 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 iconsA 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> |