tree: c0ad8eb2ef90cb52a0bd6a6095e8bae06689e487 [path history] [tgz]
  1. demo/
  2. test/
  3. .bower.json
  4. .gitignore
  5. .travis.yml
  6. bower.json
  8. hero.svg
  9. index.html
  10. iron-icon.html

Build status

Demo and API docs


The iron-icon element displays an icon. By default an icon renders as a 24px square.

Example using src:

<iron-icon src="star.png"></iron-icon>

Example setting size to 32px x 32px:

<iron-icon class="big" src="big_star.png"></iron-icon>

<style is="custom-style">
  .big {
    --iron-icon-height: 32px;
    --iron-icon-width: 32px;

The iron elements include several sets of icons. To use the default set of icons, import iron-icons.html and use the icon attribute to specify an icon:

<link rel="import" href="/components/iron-icons/iron-icons.html">

<iron-icon icon="menu"></iron-icon>

To use a different built-in set of icons, import the specific iron-icons/<iconset>-icons.html, and specify the icon as <iconset>:<icon>. For example, to use a communication icon, you would use:

<link rel="import" href="/components/iron-icons/communication-icons.html">

<iron-icon icon="communication:email"></iron-icon>

You can also create custom icon sets of bitmap or SVG icons.

Example of using an icon named cherry from a custom iconset with the ID fruit:

<iron-icon icon="fruit:cherry"></iron-icon>

See iron-iconset and iron-iconset-svg for more information about how to create a custom iconset.

See the iron-icons demo to see the icons available in the various iconsets.

To load a subset of icons from one of the default iron-icons sets, you can use the poly-icon tool. It allows you to select individual icons, and creates an iconset from them that you can use directly in your elements.


The following custom properties are available for styling:

Custom propertyDescriptionDefault
--iron-icon-widthWidth of the icon24px
--iron-icon-heightHeight of the icon24px
--iron-icon-fill-colorFill color of the svg iconcurrentcolor
--iron-icon-stroke-colorStroke color of the svg iconnone