Javatpoint Logo
Javatpoint Logo

Polymer iron-icon

The Polymer iron-icon element is used to display a single icon. Its default icon size is 24 px.

It is displayed as:

The following code shows how to set the size of an icon.

There are various set of icons in the iron elements. You have to import the iron-icons.html file in your index file for default set of icons and use the icon attribute as shown in the following command to define an icon.

We can also use different built-in set of icons by importing iron-icons/<iconset>icons.html file and define the icon as <iconset>:<icon>.

Example: Code for a communication icon

We can also create custom item and use it:

Let's see the custom properties used for styling:


Index Custom Properties Description
1) --iron-icon It is a mixin which is applied to an icon. Its default value is {}
2) --iron-icon-width It specifies the width of an icon. Its default value is 24px.
3) --iron-icon-height It specifies the height of an icon. Its default value is 24px.
4) --iron-icon-fill-color Property for filling the color of SVG icon. Its default value is currentcolor.
5) --iron-icon-stroke-color Property for filling the stroke color of SVG icon.


To use the iron-icon element, navigate to your project folder in the command prompt and use the following command -

iron icon example 1

The following example demonstrates the use of iron-icon element:


iron icon example 2

Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA