1 2<!--- 3 4This README is automatically generated from the comments in these files: 5iron-icon.html 6 7Edit those files, and our readme bot will duplicate them over here! 8Edit this file, and the bot will squash your changes :) 9 10The bot does some handling of markdown. Please file a bug if it does the wrong 11thing! https://github.com/PolymerLabs/tedium/issues 12 13--> 14 15[](https://travis-ci.org/PolymerElements/iron-icon) 16 17_[Demo and API docs](https://elements.polymer-project.org/elements/iron-icon)_ 18 19 20##<iron-icon> 21 22The `iron-icon` element displays an icon. By default an icon renders as a 24px square. 23 24Example using src: 25 26```html 27<iron-icon src="star.png"></iron-icon> 28``` 29 30Example setting size to 32px x 32px: 31 32```html 33<iron-icon class="big" src="big_star.png"></iron-icon> 34 35<style is="custom-style"> 36 .big { 37 --iron-icon-height: 32px; 38 --iron-icon-width: 32px; 39 } 40</style> 41``` 42 43The iron elements include several sets of icons. 44To use the default set of icons, import `iron-icons.html` and use the `icon` attribute to specify an icon: 45 46```html 47<link rel="import" href="/components/iron-icons/iron-icons.html"> 48 49<iron-icon icon="menu"></iron-icon> 50``` 51 52To use a different built-in set of icons, import the specific `iron-icons/<iconset>-icons.html`, and 53specify the icon as `<iconset>:<icon>`. For example, to use a communication icon, you would 54use: 55 56```html 57<link rel="import" href="/components/iron-icons/communication-icons.html"> 58 59<iron-icon icon="communication:email"></iron-icon> 60``` 61 62You can also create custom icon sets of bitmap or SVG icons. 63 64Example of using an icon named `cherry` from a custom iconset with the ID `fruit`: 65 66```html 67<iron-icon icon="fruit:cherry"></iron-icon> 68``` 69 70See [iron-iconset](iron-iconset) and [iron-iconset-svg](iron-iconset-svg) for more information about 71how to create a custom iconset. 72 73See the [iron-icons demo](iron-icons?view=demo:demo/index.html) to see the icons available 74in the various iconsets. 75 76To load a subset of icons from one of the default `iron-icons` sets, you can 77use the [poly-icon](https://poly-icon.appspot.com/) tool. It allows you 78to select individual icons, and creates an iconset from them that you can 79use directly in your elements. 80 81### Styling 82 83The following custom properties are available for styling: 84 85| Custom property | Description | Default | 86| --- | --- | --- | 87| `--iron-icon-width` | Width of the icon | `24px` | 88| `--iron-icon-height` | Height of the icon | `24px` | 89| `--iron-icon-fill-color` | Fill color of the svg icon | `currentcolor` | 90| `--iron-icon-stroke-color` | Stroke color of the svg icon | none | 91 92 93
){kind=link}
