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

Side by Side Diff: third_party/polymer/v0_8/components-chromium/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 The `iron-icon` element displays an icon. By default an icon renders as a 24px s quare.
11
12 Example using src:
13
14 <iron-icon src="star.png"></iron-icon>
15
16 Example setting size to 32px x 32px:
17
18 <iron-icon class="big" src="big_star.png"></iron-icon>
19
20 <style>
21 .big {
22 height: 32px;
23 width: 32px;
24 }
25 </style>
26
27 The iron elements include several sets of icons.
28 To use the default set of icons, import `iron-icons.html` and use the `icon` at tribute to specify an icon:
29
30 &lt;!-- import default iconset and iron-icon --&gt;
31 <link rel="import" href="/components/iron-icons/iron-icons.html">
32
33 <iron-icon icon="menu"></iron-icon>
34
35 To use a different built-in set of icons, import `iron-icons/<iconset>-icons.ht ml`, and
36 specify the icon as `<iconset>:<icon>`. For example:
37
38 &lt;!-- import communication iconset and iron-icon --&gt;
39 <link rel="import" href="/components/iron-icons/communication-icons.html">
40
41 <iron-icon icon="communication:email"></iron-icon>
42
43 You can also create custom icon sets of bitmap or SVG icons.
44
45 Example of using an icon named `cherry` from a custom iconset with the ID `fruit `:
46
47 <iron-icon icon="fruit:cherry"></iron-icon>
48
49 See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about
50 how to create a custom iconset.
51
52 See [iron-icons](http://www.polymer-project.org/components/iron-icons/demo.html) for the default set of icons.
53
54 @group Polymer Core Elements
55 @element iron-icon
56 @homepage polymer.github.io
57 --><html><head><link rel="import" href="../iron-meta/iron-meta.html">
58
59 </head><body><dom-module id="iron-icon">
60
61 <style>
62 :host {
63 display: inline-flex;
64 position: relative;
65
66 vertical-align: middle;
67 align-items: center;
68 justify-content: center;
69
70 fill: currentcolor;
71
72 width: 24px;
73 height: 24px;
74 }
75 </style>
76
77 <template>
78 <iron-meta id="meta" type="iconset"></iron-meta>
79 </template>
80
81 </dom-module>
82
83 <script src="iron-icon-extracted.js"></script></body></html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698