| OLD | NEW |
| (Empty) |
| 1 iron-icon | |
| 2 ========= | |
| 3 | |
| 4 The `iron-icon` element displays an icon. By default an icon renders as a 24px s
quare. | |
| 5 | |
| 6 Example using src: | |
| 7 | |
| 8 ```html | |
| 9 <iron-icon src="star.png"></iron-icon> | |
| 10 ``` | |
| 11 | |
| 12 Example setting size to 32px x 32px: | |
| 13 | |
| 14 ```html | |
| 15 <iron-icon class="big" src="big_star.png"></iron-icon> | |
| 16 | |
| 17 <style> | |
| 18 .big { | |
| 19 height: 32px; | |
| 20 width: 32px; | |
| 21 } | |
| 22 </style> | |
| 23 ``` | |
| 24 | |
| 25 The iron elements include several sets of icons. | |
| 26 To use the default set of icons, import `iron-icons.html` and use the `icon` at
tribute to specify an icon: | |
| 27 | |
| 28 ```html | |
| 29 <!-- import default iconset and iron-icon --> | |
| 30 <link rel="import" href="/components/iron-icons/iron-icons.html"> | |
| 31 | |
| 32 <iron-icon icon="menu"></iron-icon> | |
| 33 ``` | |
| 34 | |
| 35 To use a different built-in set of icons, import `iron-icons/<iconset>-icons.ht
ml`, and | |
| 36 specify the icon as `<iconset>:<icon>`. For example: | |
| 37 | |
| 38 ```html | |
| 39 <!-- import communication iconset and iron-icon --> | |
| 40 <link rel="import" href="/components/iron-icons/communication-icons.html"> | |
| 41 | |
| 42 <iron-icon icon="communication:email"></iron-icon> | |
| 43 ``` | |
| 44 | |
| 45 You can also create custom icon sets of bitmap or SVG icons. | |
| 46 | |
| 47 Example of using an icon named `cherry` from a custom iconset with the ID `fruit
`: | |
| 48 | |
| 49 ```html | |
| 50 <iron-icon icon="fruit:cherry"></iron-icon> | |
| 51 ``` | |
| 52 | |
| 53 See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for
more information about | |
| 54 how to create a custom iconset. | |
| 55 | |
| 56 See [iron-icons](http://www.polymer-project.org/components/iron-icons/demo.html)
for the default set of icons. | |
| OLD | NEW |