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

Side by Side Diff: third_party/polymer/v0_8/components/iron-icon/iron-icon.html

Issue 1082403004: Import Polymer 0.8 and several key elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Also remove polymer/explainer Created 5 years, 7 months 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
OLDNEW
(Empty)
1 <!--
2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6 Code distributed by Google as part of the polymer project is also
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
8 -->
9 <!--
10
11 The `iron-icon` element displays an icon. By default an icon renders as a 24px s quare.
12
13 Example using src:
14
15 <iron-icon src="star.png"></iron-icon>
16
17 Example setting size to 32px x 32px:
18
19 <iron-icon class="big" src="big_star.png"></iron-icon>
20
21 <style>
22 .big {
23 height: 32px;
24 width: 32px;
25 }
26 </style>
27
28 The iron elements include several sets of icons.
29 To use the default set of icons, import `iron-icons.html` and use the `icon` at tribute to specify an icon:
30
31 &lt;!-- import default iconset and iron-icon --&gt;
32 <link rel="import" href="/components/iron-icons/iron-icons.html">
33
34 <iron-icon icon="menu"></iron-icon>
35
36 To use a different built-in set of icons, import `iron-icons/<iconset>-icons.ht ml`, and
37 specify the icon as `<iconset>:<icon>`. For example:
38
39 &lt;!-- import communication iconset and iron-icon --&gt;
40 <link rel="import" href="/components/iron-icons/communication-icons.html">
41
42 <iron-icon icon="communication:email"></iron-icon>
43
44 You can also create custom icon sets of bitmap or SVG icons.
45
46 Example of using an icon named `cherry` from a custom iconset with the ID `fruit `:
47
48 <iron-icon icon="fruit:cherry"></iron-icon>
49
50 See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about
51 how to create a custom iconset.
52
53 See [iron-icons](http://www.polymer-project.org/components/iron-icons/demo.html) for the default set of icons.
54
55 @group Polymer Core Elements
56 @element iron-icon
57 @homepage polymer.github.io
58 -->
59
60 <link rel="import" href="../iron-meta/iron-meta.html">
61
62 <dom-module id="iron-icon">
63
64 <style>
65 :host {
66 display: inline-flex;
67 position: relative;
68
69 vertical-align: middle;
70 align-items: center;
71 justify-content: center;
72
73 fill: currentcolor;
74
75 width: 24px;
76 height: 24px;
77 }
78 </style>
79
80 <template>
81 <iron-meta id="meta" type="iconset"></iron-meta>
82 </template>
83
84 </dom-module>
85
86 <script>
87
88 Polymer({
89
90 is: 'iron-icon',
91
92 properties: {
93
94 icon: {
95 type: String,
96 //value: '',
97 observer: '_iconChanged'
98 },
99
100 theme: {
101 type: String,
102 //value: '',
103 observer: '_updateIcon'
104 },
105
106 src: {
107 type: String,
108 //value: '',
109 observer: '_srcChanged'
110 }
111
112 },
113
114 _DEFAULT_ICONSET: 'icons',
115
116 _iconChanged: function(icon) {
117 var parts = (icon || '').split(':');
118 this._iconName = parts.pop();
119 this._iconsetName = parts.pop() || this._DEFAULT_ICONSET;
120 this._updateIcon();
121 },
122
123 _srcChanged: function(src) {
124 this._updateIcon();
125 },
126
127 _usesIconset: function() {
128 return this.icon || !this.src;
129 },
130
131 _updateIcon: function() {
132 if (this._usesIconset()) {
133 this._iconset = this.$.meta.byKey(this._iconsetName);
134 if (this._iconset) {
135 this._iconset.applyIcon(this, this._iconName, this.theme);
136 } else {
137 console.warn('iron-icon: could not find iconset `'
138 + this._iconsetName + '`, did you import the iconset?');
139 }
140 } else {
141 //if (this._iconset) {
142 // this._iconset.removeIcon(this.root);
143 //}
144 if (!this._img) {
145 this._img = document.createElement('img');
146 }
147 this._img.src = this.src;
148 Polymer.dom(this.root).appendChild(this._img);
149 }
150 }
151
152 });
153
154 </script>
OLDNEW
« no previous file with comments | « third_party/polymer/v0_8/components/iron-icon/index.html ('k') | third_party/polymer/v0_8/components/iron-icons/.bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698