Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(101)

Side by Side Diff: lib/src/iron-icon/iron-icon.html

Issue 1418513006: update elements and fix some bugs (Closed) Base URL: git@github.com:dart-lang/polymer_elements.git@master
Patch Set: code review updates Created 5 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « lib/src/iron-form/test/basic.html ('k') | lib/src/iron-icon/test/iron-icon.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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
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>
OLDNEW
« no previous file with comments | « lib/src/iron-form/test/basic.html ('k') | lib/src/iron-icon/test/iron-icon.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698