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