Polymer - Iron Icon

The <iron-icon> element is used to display a single icon. The default icon size is 24px square.

An icon can be displayed using src as shown below −

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

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

<iron-icon class = "big" src = "big_icon.png"></iron-icon>
<style is = "custom-style">
   .big {
      --iron-icon-height: 20px;
      --iron-icon-width: 20px;

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

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

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

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

For instance, you want to use a communication icon, then the code will be −

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

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

You can also use an icon by creating custom icon sets as shown below −

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

The following table shows the custom properties to be used for styling −

Sr.No. Property name & Description


It is a mixin that is applied to an icon. Default value is {}



It specifies the width of an icon. Default value is 24px.



It specifies the height of an icon. Default value is 24px.



Property for filling the color of SVG icon. Default value is currentcolor.



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 −

bower install PolymerElements/iron-icon --save

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

<!DOCTYPE html>
      <base href = "https://user-content-dot-custom-elements.appspot.com/PolymerElements/iron-icon/v1.0.13/iron-icon/">
      <script src = "../webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "../iron-icons/iron-icons.html">
      <link rel = "import" href = "iron-icon.html">

      <h2>Iron-Icon Example</h2>
      <iron-icon icon = "android"></iron-icon>


To run the application, navigate to your project directory and run the following command −

polymer serve

Now open the browser and navigate to Following will be the output.

Iron Icon
Kickstart Your Career

Get certified by completing the course

Get Started