Demo and API docs

##<iron-icon>

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;
  }
</style>

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.

Styling

The following custom properties are available for styling:

Custom property	Description	Default
--iron-icon-width	Width of the icon	24px
--iron-icon-height	Height of the icon	24px
--iron-icon-fill-color	Fill color of the svg icon	currentcolor
--iron-icon-stroke-color	Stroke color of the svg icon	none