OLD | NEW |
1 <!-- | 1 <!-- |
2 @license | 2 @license |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
7 Code distributed by Google as part of the polymer project is also | 7 Code distributed by Google as part of the polymer project is also |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
9 --> | 9 --> |
10 | 10 |
(...skipping 14 matching lines...) Expand all Loading... |
25 <iron-icon class="big" src="big_star.png"></iron-icon> | 25 <iron-icon class="big" src="big_star.png"></iron-icon> |
26 | 26 |
27 <style is="custom-style"> | 27 <style is="custom-style"> |
28 .big { | 28 .big { |
29 --iron-icon-height: 32px; | 29 --iron-icon-height: 32px; |
30 --iron-icon-width: 32px; | 30 --iron-icon-width: 32px; |
31 } | 31 } |
32 </style> | 32 </style> |
33 | 33 |
34 The iron elements include several sets of icons. | 34 The iron elements include several sets of icons. |
35 To use the default set of icons, import `iron-icons.html` and use the `icon` at
tribute to specify an icon: | 35 To use the default set of icons, import `iron-icons.html` and use the `icon` att
ribute to specify an icon: |
36 | 36 |
37 <!-- import default iconset and iron-icon --> | |
38 <link rel="import" href="/components/iron-icons/iron-icons.html"> | 37 <link rel="import" href="/components/iron-icons/iron-icons.html"> |
39 | 38 |
40 <iron-icon icon="menu"></iron-icon> | 39 <iron-icon icon="menu"></iron-icon> |
41 | 40 |
42 To use a different built-in set of icons, import `iron-icons/<iconset>-icons.ht
ml`, and | 41 To use a different built-in set of icons, import the specific `iron-icons/<icons
et>-icons.html`, and |
43 specify the icon as `<iconset>:<icon>`. For example: | 42 specify the icon as `<iconset>:<icon>`. For example, to use a communication icon
, you would |
| 43 use: |
44 | 44 |
45 <!-- import communication iconset and iron-icon --> | |
46 <link rel="import" href="/components/iron-icons/communication-icons.html"> | 45 <link rel="import" href="/components/iron-icons/communication-icons.html"> |
47 | 46 |
48 <iron-icon icon="communication:email"></iron-icon> | 47 <iron-icon icon="communication:email"></iron-icon> |
49 | 48 |
50 You can also create custom icon sets of bitmap or SVG icons. | 49 You can also create custom icon sets of bitmap or SVG icons. |
51 | 50 |
52 Example of using an icon named `cherry` from a custom iconset with the ID `fruit
`: | 51 Example of using an icon named `cherry` from a custom iconset with the ID `fruit
`: |
53 | 52 |
54 <iron-icon icon="fruit:cherry"></iron-icon> | 53 <iron-icon icon="fruit:cherry"></iron-icon> |
55 | 54 |
56 See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for
more information about | 55 See [iron-iconset](iron-iconset) and [iron-iconset-svg](iron-iconset-svg) for mo
re information about |
57 how to create a custom iconset. | 56 how to create a custom iconset. |
58 | 57 |
59 See [iron-icons](https://elements.polymer-project.org/elements/iron-icons?view=d
emo:demo/index.html) for the default set of icons. | 58 See the [iron-icons demo](iron-icons?view=demo:demo/index.html) to see the icons
available |
| 59 in the various iconsets. |
60 | 60 |
61 | 61 |
62 ### Styling | 62 ### Styling |
63 | 63 |
64 The following custom properties are available for styling: | 64 The following custom properties are available for styling: |
65 | 65 |
66 Custom property | Description | Default | 66 Custom property | Description | Default |
67 ----------------|-------------|---------- | 67 ----------------|-------------|---------- |
68 `--iron-icon-width` | Width of the icon | `24px` | 68 `--iron-icon-width` | Width of the icon | `24px` |
69 `--iron-icon-height` | Height of the icon | `24px` | 69 `--iron-icon-height` | Height of the icon | `24px` |
| 70 `--iron-icon-fill-color` | Fill color of the svg icon | `currentcolor` |
| 71 `--iron-icon-stroke-color` | Stroke color of the svg icon | none |
70 | 72 |
71 @group Iron Elements | 73 @group Iron Elements |
72 @element iron-icon | 74 @element iron-icon |
73 @demo demo/index.html | 75 @demo demo/index.html |
74 @hero hero.svg | 76 @hero hero.svg |
75 @homepage polymer.github.io | 77 @homepage polymer.github.io |
76 --> | 78 --> |
77 | 79 |
78 <dom-module id="iron-icon"> | 80 <dom-module id="iron-icon"> |
79 | 81 |
80 <style> | 82 <style> |
81 :host { | 83 :host { |
82 @apply(--layout-inline); | 84 @apply(--layout-inline); |
83 @apply(--layout-center-center); | 85 @apply(--layout-center-center); |
84 position: relative; | 86 position: relative; |
85 | 87 |
86 vertical-align: middle; | 88 vertical-align: middle; |
87 | 89 |
88 fill: currentcolor; | 90 fill: var(--iron-icon-fill-color, currentcolor); |
| 91 stroke: var(--iron-icon-stroke-color, none); |
89 | 92 |
90 width: var(--iron-icon-width, 24px); | 93 width: var(--iron-icon-width, 24px); |
91 height: var(--iron-icon-height, 24px); | 94 height: var(--iron-icon-height, 24px); |
92 } | 95 } |
93 </style> | 96 </style> |
94 | 97 |
95 <template> | 98 <template> |
96 <iron-meta id="meta" type="iconset"></iron-meta> | |
97 </template> | 99 </template> |
98 | 100 |
99 <script> | 101 <script> |
100 | 102 |
101 Polymer({ | 103 Polymer({ |
102 | 104 |
103 is: 'iron-icon', | 105 is: 'iron-icon', |
104 | 106 |
105 properties: { | 107 properties: { |
106 | 108 |
(...skipping 16 matching lines...) Expand all Loading... |
123 }, | 125 }, |
124 | 126 |
125 /** | 127 /** |
126 * If using iron-icon without an iconset, you can set the src to be | 128 * If using iron-icon without an iconset, you can set the src to be |
127 * the URL of an individual icon image file. Note that this will take | 129 * the URL of an individual icon image file. Note that this will take |
128 * precedence over a given icon attribute. | 130 * precedence over a given icon attribute. |
129 */ | 131 */ |
130 src: { | 132 src: { |
131 type: String, | 133 type: String, |
132 observer: '_srcChanged' | 134 observer: '_srcChanged' |
| 135 }, |
| 136 |
| 137 /** |
| 138 * @type {!Polymer.IronMeta} |
| 139 */ |
| 140 _meta: { |
| 141 value: Polymer.Base.create('iron-meta', {type: 'iconset'}) |
133 } | 142 } |
| 143 |
134 }, | 144 }, |
135 | 145 |
136 _DEFAULT_ICONSET: 'icons', | 146 _DEFAULT_ICONSET: 'icons', |
137 | 147 |
138 _iconChanged: function(icon) { | 148 _iconChanged: function(icon) { |
139 var parts = (icon || '').split(':'); | 149 var parts = (icon || '').split(':'); |
140 this._iconName = parts.pop(); | 150 this._iconName = parts.pop(); |
141 this._iconsetName = parts.pop() || this._DEFAULT_ICONSET; | 151 this._iconsetName = parts.pop() || this._DEFAULT_ICONSET; |
142 this._updateIcon(); | 152 this._updateIcon(); |
143 }, | 153 }, |
144 | 154 |
145 _srcChanged: function(src) { | 155 _srcChanged: function(src) { |
146 this._updateIcon(); | 156 this._updateIcon(); |
147 }, | 157 }, |
148 | 158 |
149 _usesIconset: function() { | 159 _usesIconset: function() { |
150 return this.icon || !this.src; | 160 return this.icon || !this.src; |
151 }, | 161 }, |
152 | 162 |
| 163 /** @suppress {visibility} */ |
153 _updateIcon: function() { | 164 _updateIcon: function() { |
154 if (this._usesIconset()) { | 165 if (this._usesIconset()) { |
155 if (this._iconsetName) { | 166 if (this._iconsetName) { |
156 this._iconset = this.$.meta.byKey(this._iconsetName); | 167 this._iconset = /** @type {?Polymer.Iconset} */ ( |
| 168 this._meta.byKey(this._iconsetName)); |
157 if (this._iconset) { | 169 if (this._iconset) { |
158 this._iconset.applyIcon(this, this._iconName, this.theme); | 170 this._iconset.applyIcon(this, this._iconName, this.theme); |
| 171 this.unlisten(window, 'iron-iconset-added', '_updateIcon'); |
159 } else { | 172 } else { |
160 this._warn(this._logf('_updateIcon', 'could not find iconset `' | 173 this.listen(window, 'iron-iconset-added', '_updateIcon'); |
161 + this._iconsetName + '`, did you import the iconset?')); | |
162 } | 174 } |
163 } | 175 } |
164 } else { | 176 } else { |
165 if (!this._img) { | 177 if (!this._img) { |
166 this._img = document.createElement('img'); | 178 this._img = document.createElement('img'); |
167 this._img.style.width = '100%'; | 179 this._img.style.width = '100%'; |
168 this._img.style.height = '100%'; | 180 this._img.style.height = '100%'; |
| 181 this._img.draggable = false; |
169 } | 182 } |
170 this._img.src = this.src; | 183 this._img.src = this.src; |
171 Polymer.dom(this.root).appendChild(this._img); | 184 Polymer.dom(this.root).appendChild(this._img); |
172 } | 185 } |
173 } | 186 } |
174 | 187 |
175 }); | 188 }); |
176 | 189 |
177 </script> | 190 </script> |
178 | 191 |
179 </dom-module> | 192 </dom-module> |
OLD | NEW |