OLD | NEW |
1 core-icon | 1 iron-icon |
2 ========= | 2 ========= |
3 | 3 |
4 See the [component page](http://polymer-project.org/docs/elements/core-elements.
html#core-icon) for more information. | 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 |