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:
Table:
| 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. |
Example
To use the iron-icon element, navigate to your project folder in the command prompt and use the following command –
The following example demonstrates the use of iron-icon element:
Output:
