Polymer - Iron Icon

Quiz

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

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
1	--iron-icon It is a mixin that is applied to an icon. Default value is {}
2	--iron-icon-width It specifies the width of an icon. Default value is 24px.
3	--iron-icon-height It specifies the height of an icon. Default value is 24px.
4	--iron-icon-fill-color Property for filling the color of SVG icon. Default value is currentcolor.
5	--iron-icon-stroke-color Property for filling the stroke color of SVG icon.

Example

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>
<html>
   <head>
      <title>iron-icon</title>
      <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">
   </head>

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

Output

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

polymer serve

Now open the browser and navigate to http://127.0.0.1:8081/. Following will be the output.

polymer_elements.htm

Print Page