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 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
45 <link rel="import" href="/components/iron-icons/communication-icons.html"> | 45 <link rel="import" href="/components/iron-icons/communication-icons.html"> |
46 | 46 |
47 <iron-icon icon="communication:email"></iron-icon> | 47 <iron-icon icon="communication:email"></iron-icon> |
48 | 48 |
49 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. |
50 | 50 |
51 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
`: |
52 | 52 |
53 <iron-icon icon="fruit:cherry"></iron-icon> | 53 <iron-icon icon="fruit:cherry"></iron-icon> |
54 | 54 |
55 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 |
56 how to create a custom iconset. | 56 how to create a custom iconset. |
57 | 57 |
58 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. |
59 | 60 |
60 | 61 |
61 ### Styling | 62 ### Styling |
62 | 63 |
63 The following custom properties are available for styling: | 64 The following custom properties are available for styling: |
64 | 65 |
65 Custom property | Description | Default | 66 Custom property | Description | Default |
66 ----------------|-------------|---------- | 67 ----------------|-------------|---------- |
67 `--iron-icon-width` | Width of the icon | `24px` | 68 `--iron-icon-width` | Width of the icon | `24px` |
68 `--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 |
69 | 72 |
70 @group Iron Elements | 73 @group Iron Elements |
71 @element iron-icon | 74 @element iron-icon |
72 @demo demo/index.html | 75 @demo demo/index.html |
73 @hero hero.svg | 76 @hero hero.svg |
74 @homepage polymer.github.io | 77 @homepage polymer.github.io |
75 --> | 78 --> |
76 | 79 |
77 <dom-module id="iron-icon"> | 80 <dom-module id="iron-icon"> |
78 | 81 |
79 <style> | 82 <style> |
80 :host { | 83 :host { |
81 @apply(--layout-inline); | 84 @apply(--layout-inline); |
82 @apply(--layout-center-center); | 85 @apply(--layout-center-center); |
83 position: relative; | 86 position: relative; |
84 | 87 |
85 vertical-align: middle; | 88 vertical-align: middle; |
86 | 89 |
87 fill: currentcolor; | 90 fill: var(--iron-icon-fill-color, currentcolor); |
| 91 stroke: var(--iron-icon-stroke-color, none); |
88 | 92 |
89 width: var(--iron-icon-width, 24px); | 93 width: var(--iron-icon-width, 24px); |
90 height: var(--iron-icon-height, 24px); | 94 height: var(--iron-icon-height, 24px); |
91 } | 95 } |
92 </style> | 96 </style> |
93 | 97 |
94 <template> | 98 <template> |
95 </template> | 99 </template> |
96 | 100 |
97 <script> | 101 <script> |
(...skipping 24 matching lines...) Expand all Loading... |
122 | 126 |
123 /** | 127 /** |
124 * 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 |
125 * 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 |
126 * precedence over a given icon attribute. | 130 * precedence over a given icon attribute. |
127 */ | 131 */ |
128 src: { | 132 src: { |
129 type: String, | 133 type: String, |
130 observer: '_srcChanged' | 134 observer: '_srcChanged' |
131 }, | 135 }, |
132 | 136 |
| 137 /** |
| 138 * @type {!Polymer.IronMeta} |
| 139 */ |
133 _meta: { | 140 _meta: { |
134 value: Polymer.Base.create('iron-meta', {type: 'iconset'}) | 141 value: Polymer.Base.create('iron-meta', {type: 'iconset'}) |
135 } | 142 } |
136 | 143 |
137 }, | 144 }, |
138 | 145 |
139 _DEFAULT_ICONSET: 'icons', | 146 _DEFAULT_ICONSET: 'icons', |
140 | 147 |
141 _iconChanged: function(icon) { | 148 _iconChanged: function(icon) { |
142 var parts = (icon || '').split(':'); | 149 var parts = (icon || '').split(':'); |
143 this._iconName = parts.pop(); | 150 this._iconName = parts.pop(); |
144 this._iconsetName = parts.pop() || this._DEFAULT_ICONSET; | 151 this._iconsetName = parts.pop() || this._DEFAULT_ICONSET; |
145 this._updateIcon(); | 152 this._updateIcon(); |
146 }, | 153 }, |
147 | 154 |
148 _srcChanged: function(src) { | 155 _srcChanged: function(src) { |
149 this._updateIcon(); | 156 this._updateIcon(); |
150 }, | 157 }, |
151 | 158 |
152 _usesIconset: function() { | 159 _usesIconset: function() { |
153 return this.icon || !this.src; | 160 return this.icon || !this.src; |
154 }, | 161 }, |
155 | 162 |
156 /** @suppress {visibility} */ | 163 /** @suppress {visibility} */ |
157 _updateIcon: function() { | 164 _updateIcon: function() { |
158 if (this._usesIconset()) { | 165 if (this._usesIconset()) { |
159 if (this._iconsetName) { | 166 if (this._iconsetName) { |
160 this._iconset = this._meta.byKey(this._iconsetName); | 167 this._iconset = /** @type {?Polymer.Iconset} */ ( |
| 168 this._meta.byKey(this._iconsetName)); |
161 if (this._iconset) { | 169 if (this._iconset) { |
162 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'); |
163 } else { | 172 } else { |
164 this._warn(this._logf('_updateIcon', 'could not find iconset `' | 173 this.listen(window, 'iron-iconset-added', '_updateIcon'); |
165 + this._iconsetName + '`, did you import the iconset?')); | |
166 } | 174 } |
167 } | 175 } |
168 } else { | 176 } else { |
169 if (!this._img) { | 177 if (!this._img) { |
170 this._img = document.createElement('img'); | 178 this._img = document.createElement('img'); |
171 this._img.style.width = '100%'; | 179 this._img.style.width = '100%'; |
172 this._img.style.height = '100%'; | 180 this._img.style.height = '100%'; |
173 this._img.draggable = false; | 181 this._img.draggable = false; |
174 } | 182 } |
175 this._img.src = this.src; | 183 this._img.src = this.src; |
176 Polymer.dom(this.root).appendChild(this._img); | 184 Polymer.dom(this.root).appendChild(this._img); |
177 } | 185 } |
178 } | 186 } |
179 | 187 |
180 }); | 188 }); |
181 | 189 |
182 </script> | 190 </script> |
183 | 191 |
184 </dom-module> | 192 </dom-module> |
OLD | NEW |