| 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 |