third_party/polymer/v0_8/components-chromium/iron-icon/iron-icon.html - Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed.

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

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh 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

« no previous file with comments | « third_party/polymer/v0_8/components-chromium/iron-icon/index.html ('k') | third_party/polymer/v0_8/components-chromium/iron-icon/iron-icon-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!--	1 <!--

	2 @license

2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.	3 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 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 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 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 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 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

8 --><!--	9 --><html><head><link rel="import" href="../polymer/polymer.html">

	10 <link rel="import" href="../iron-meta/iron-meta.html">

	11 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

	12

	13 <!--

9	14

10 The `iron-icon` element displays an icon. By default an icon renders as a 24px s quare.	15 The `iron-icon` element displays an icon. By default an icon renders as a 24px s quare.

11	16

12 Example using src:	17 Example using src:

13	18

14 <iron-icon src="star.png"></iron-icon>	19 <iron-icon src="star.png"></iron-icon>

15	20

16 Example setting size to 32px x 32px:	21 Example setting size to 32px x 32px:

17	22

18 <iron-icon class="big" src="big_star.png"></iron-icon>	23 <iron-icon class="big" src="big_star.png"></iron-icon>

(...skipping 25 matching lines...) Expand all Loading...
44	49

45 Example of using an icon named `cherry` from a custom iconset with the ID `fruit `:	50 Example of using an icon named `cherry` from a custom iconset with the ID `fruit `:

46	51

47 <iron-icon icon="fruit:cherry"></iron-icon>	52 <iron-icon icon="fruit:cherry"></iron-icon>

48	53

49 See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about	54 See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about

50 how to create a custom iconset.	55 how to create a custom iconset.

51	56

52 See [iron-icons](http://www.polymer-project.org/components/iron-icons/demo.html) for the default set of icons.	57 See [iron-icons](http://www.polymer-project.org/components/iron-icons/demo.html) for the default set of icons.

53	58

54 @group Polymer Core Elements	59

	60 ### Styling

	61

	62 The following custom properties are available for styling:

	63

	64 Custom property \| Description \| Default

	65 ----------------\|-------------\|----------

	66 `--iron-icon-width` \| Width of the icon \| `24px`

	67 `--iron-icon-height` \| Height of the icon \| `24px`

	68

	69 @group Iron Elements

55 @element iron-icon	70 @element iron-icon

	71 @demo demo/index.html

	72 @hero hero.svg

56 @homepage polymer.github.io	73 @homepage polymer.github.io

57 --><html><head><link rel="import" href="../polymer/polymer.html">	74 -->

58 <link rel="import" href="../iron-meta/iron-meta.html">

59 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

60	75

61 <style is="x-style">	76 <style is="custom-style">

62 * {	77 :root {

63 --iron-icon-size: 24px;	78 --iron-icon-width: 24px;

	79 --iron-icon-height: 24px;

64 }	80 }

65 </style>	81 </style>

66	82

67 </head><body><dom-module id="iron-icon">	83 </head><body><dom-module id="iron-icon">

68	84

69 <style>	85 <style>

70 :host {	86 :host {

71 mixin(--layout-inline --layout-center-center);	87 @apply(--layout-inline);

	88 @apply(--layout-center-center);

72 position: relative;	89 position: relative;

73	90

74 vertical-align: middle;	91 vertical-align: middle;

75	92

76 fill: currentcolor;	93 fill: currentcolor;

77	94

78 width: var(--iron-icon-size);	95 width: var(--iron-icon-width);

79 height: var(--iron-icon-size);	96 height: var(--iron-icon-height);

80 }	97 }

81 </style>	98 </style>

82	99

83 <template>	100 <template>

84 <iron-meta id="meta" type="iconset"></iron-meta>	101 <iron-meta id="meta" type="iconset"></iron-meta>

85 </template>	102 </template>

86	103

87 </dom-module>	104 </dom-module>

88	105

89 <script src="iron-icon-extracted.js"></script></body></html>	106 <script src="iron-icon-extracted.js"></script></body></html>

OLD	NEW