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 |