Name Last Update
demo Loading commit data...
test Loading commit data...
.bower.json Loading commit data...
.gitignore Loading commit data... Loading commit data...
bower.json Loading commit data...
hero.svg Loading commit data...
index.html Loading commit data...
iron-icon.html Loading commit data...


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>

  .big {
    height: 32px;
    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:

<!-- import default iconset and iron-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 iron-icons/<iconset>-icons.html, and specify the icon as <iconset>:<icon>. For example:

<!-- import communication iconset and iron-icon -->
<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 iron-icons for the default set of icons.