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

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

Issue 1187823002: Update Polymer components and re-run reproduce.sh (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Rebase Created 5 years, 6 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
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
11 <link rel="import" href="../polymer/polymer.html"> 11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../iron-meta/iron-meta.html"> 12 <link rel="import" href="../iron-meta/iron-meta.html">
13 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> 13 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
14 14
15 <!-- 15 <!--
16 16
17 The `iron-icon` element displays an icon. By default an icon renders as a 24px s quare. 17 The `iron-icon` element displays an icon. By default an icon renders as a 24px s quare.
18 18
19 Example using src: 19 Example using src:
20 20
21 <iron-icon src="star.png"></iron-icon> 21 <iron-icon src="star.png"></iron-icon>
22 22
23 Example setting size to 32px x 32px: 23 Example setting size to 32px x 32px:
24 24
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> 27 <style is="custom-style">
28 .big { 28 .big {
29 height: 32px; 29 --iron-icon-height: 32px;
30 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` at tribute to specify an icon:
36 36
37 &lt;!-- import default iconset and iron-icon --&gt; 37 &lt;!-- import default iconset and iron-icon --&gt;
38 <link rel="import" href="/components/iron-icons/iron-icons.html"> 38 <link rel="import" href="/components/iron-icons/iron-icons.html">
39 39
40 <iron-icon icon="menu"></iron-icon> 40 <iron-icon icon="menu"></iron-icon>
41 41
42 To use a different built-in set of icons, import `iron-icons/<iconset>-icons.ht ml`, and 42 To use a different built-in set of icons, import `iron-icons/<iconset>-icons.ht ml`, and
43 specify the icon as `<iconset>:<icon>`. For example: 43 specify the icon as `<iconset>:<icon>`. For example:
44 44
45 &lt;!-- import communication iconset and iron-icon --&gt; 45 &lt;!-- import communication iconset and iron-icon --&gt;
46 <link rel="import" href="/components/iron-icons/communication-icons.html"> 46 <link rel="import" href="/components/iron-icons/communication-icons.html">
47 47
48 <iron-icon icon="communication:email"></iron-icon> 48 <iron-icon icon="communication:email"></iron-icon>
49 49
50 You can also create custom icon sets of bitmap or SVG icons. 50 You can also create custom icon sets of bitmap or SVG icons.
51 51
52 Example of using an icon named `cherry` from a custom iconset with the ID `fruit `: 52 Example of using an icon named `cherry` from a custom iconset with the ID `fruit `:
53 53
54 <iron-icon icon="fruit:cherry"></iron-icon> 54 <iron-icon icon="fruit:cherry"></iron-icon>
55 55
56 See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about 56 See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about
57 how to create a custom iconset. 57 how to create a custom iconset.
58 58
59 See [iron-icons](http://www.polymer-project.org/components/iron-icons/demo.html) for the default set of icons. 59 See [iron-icons](https://elements.polymer-project.org/elements/iron-icons?view=d emo:demo/index.html) for the default set of icons.
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 70
71 @group Iron Elements 71 @group Iron Elements
72 @element iron-icon 72 @element iron-icon
73 @demo demo/index.html 73 @demo demo/index.html
74 @hero hero.svg 74 @hero hero.svg
75 @homepage polymer.github.io 75 @homepage polymer.github.io
76 --> 76 -->
77 77
78 <style is="custom-style">
79 :root {
80 --iron-icon-width: 24px;
81 --iron-icon-height: 24px;
82 }
83 </style>
84
85 <dom-module id="iron-icon"> 78 <dom-module id="iron-icon">
86 79
87 <style> 80 <style>
88 :host { 81 :host {
89 @apply(--layout-inline); 82 @apply(--layout-inline);
90 @apply(--layout-center-center); 83 @apply(--layout-center-center);
91 position: relative; 84 position: relative;
92 85
93 vertical-align: middle; 86 vertical-align: middle;
94 87
95 fill: currentcolor; 88 fill: currentcolor;
96 89
97 width: var(--iron-icon-width); 90 width: var(--iron-icon-width, 24px);
98 height: var(--iron-icon-height); 91 height: var(--iron-icon-height, 24px);
99 } 92 }
100 </style> 93 </style>
101 94
102 <template> 95 <template>
103 <iron-meta id="meta" type="iconset"></iron-meta> 96 <iron-meta id="meta" type="iconset"></iron-meta>
104 </template> 97 </template>
105 98
106 <script> 99 <script>
107 100
108 Polymer({ 101 Polymer({
(...skipping 68 matching lines...) Expand 10 before | Expand all | Expand 10 after
177 this._img.src = this.src; 170 this._img.src = this.src;
178 Polymer.dom(this.root).appendChild(this._img); 171 Polymer.dom(this.root).appendChild(this._img);
179 } 172 }
180 } 173 }
181 174
182 }); 175 });
183 176
184 </script> 177 </script>
185 178
186 </dom-module> 179 </dom-module>
187
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components/iron-icon/hero.svg ('k') | third_party/polymer/v1_0/components/iron-icons/.bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698