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