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 |