| OLD | NEW |
| 1 | 1 |
| 2 | 2 |
| 3 Polymer({ | 3 Polymer({ |
| 4 | 4 |
| 5 is: 'iron-icon', | 5 is: 'iron-icon', |
| 6 | 6 |
| 7 enableCustomStyleProperties: true, | 7 properties: { |
| 8 | 8 |
| 9 properties: { | 9 /** |
| 10 * The name of the icon to use. The name should be of the form: |
| 11 * `iconset_name:icon_name`. |
| 12 */ |
| 13 icon: { |
| 14 type: String, |
| 15 observer: '_iconChanged' |
| 16 }, |
| 10 | 17 |
| 11 icon: { | 18 /** |
| 12 type: String, | 19 * The name of the theme to used, if one is specified by the |
| 13 observer: '_iconChanged' | 20 * iconset. |
| 21 */ |
| 22 theme: { |
| 23 type: String, |
| 24 observer: '_updateIcon' |
| 25 }, |
| 26 |
| 27 /** |
| 28 * If using iron-icon without an iconset, you can set the src to be |
| 29 * the URL of an individual icon image file. Note that this will take |
| 30 * precedence over a given icon attribute. |
| 31 */ |
| 32 src: { |
| 33 type: String, |
| 34 observer: '_srcChanged' |
| 35 } |
| 14 }, | 36 }, |
| 15 | 37 |
| 16 theme: { | 38 _DEFAULT_ICONSET: 'icons', |
| 17 type: String, | 39 |
| 18 observer: '_updateIcon' | 40 _iconChanged: function(icon) { |
| 41 var parts = (icon || '').split(':'); |
| 42 this._iconName = parts.pop(); |
| 43 this._iconsetName = parts.pop() || this._DEFAULT_ICONSET; |
| 44 this._updateIcon(); |
| 19 }, | 45 }, |
| 20 | 46 |
| 21 src: { | 47 _srcChanged: function(src) { |
| 22 type: String, | 48 this._updateIcon(); |
| 23 observer: '_srcChanged' | 49 }, |
| 50 |
| 51 _usesIconset: function() { |
| 52 return this.icon || !this.src; |
| 53 }, |
| 54 |
| 55 _updateIcon: function() { |
| 56 if (this._usesIconset()) { |
| 57 if (this._iconsetName) { |
| 58 this._iconset = this.$.meta.byKey(this._iconsetName); |
| 59 if (this._iconset) { |
| 60 this._iconset.applyIcon(this, this._iconName, this.theme); |
| 61 } else { |
| 62 this._warn(this._logf('_updateIcon', 'could not find iconset `' |
| 63 + this._iconsetName + '`, did you import the iconset?')); |
| 64 } |
| 65 } |
| 66 } else { |
| 67 if (!this._img) { |
| 68 this._img = document.createElement('img'); |
| 69 this._img.style.width = '100%'; |
| 70 this._img.style.height = '100%'; |
| 71 } |
| 72 this._img.src = this.src; |
| 73 Polymer.dom(this.root).appendChild(this._img); |
| 74 } |
| 24 } | 75 } |
| 25 | 76 |
| 26 }, | 77 }); |
| 27 | 78 |
| 28 _DEFAULT_ICONSET: 'icons', | 79 |
| 29 | |
| 30 _iconChanged: function(icon) { | |
| 31 var parts = (icon || '').split(':'); | |
| 32 this._iconName = parts.pop(); | |
| 33 this._iconsetName = parts.pop() || this._DEFAULT_ICONSET; | |
| 34 this._updateIcon(); | |
| 35 }, | |
| 36 | |
| 37 _srcChanged: function(src) { | |
| 38 this._updateIcon(); | |
| 39 }, | |
| 40 | |
| 41 _usesIconset: function() { | |
| 42 return this.icon || !this.src; | |
| 43 }, | |
| 44 | |
| 45 _updateIcon: function() { | |
| 46 if (this._usesIconset()) { | |
| 47 this._iconset = this.$.meta.byKey(this._iconsetName); | |
| 48 if (this._iconset) { | |
| 49 this._iconset.applyIcon(this, this._iconName, this.theme); | |
| 50 } else { | |
| 51 console.warn('iron-icon: could not find iconset `' | |
| 52 + this._iconsetName + '`, did you import the iconset?'); | |
| 53 } | |
| 54 } else { | |
| 55 if (!this._img) { | |
| 56 this._img = document.createElement('img'); | |
| 57 this._img.style.width = '100%'; | |
| 58 this._img.style.height = '100%'; | |
| 59 } | |
| 60 this._img.src = this.src; | |
| 61 Polymer.dom(this.root).appendChild(this._img); | |
| 62 } | |
| 63 } | |
| 64 | |
| 65 }); | |
| 66 | |
| OLD | NEW |