third_party/polymer/v1_0/components-chromium/iron-icon/iron-icon.html - Issue 1187823002: Update Polymer components and re-run reproduce.sh

Side by Side Diff: third_party/polymer/v1_0/components-chromium/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

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/iron-icon/hero.svg ('k') | third_party/polymer/v1_0/components-chromium/iron-icons/.bower.json » ('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 @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 --><html><head><link rel="import" href="../polymer/polymer.html">	9 --><html><head><link rel="import" href="../polymer/polymer.html">

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

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

12	12

13 <!--	13 <!--

14	14

15 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.

16	16

17 Example using src:	17 Example using src:

18	18

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

20	20

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

22	22

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

24	24

25 <style>	25 <style is="custom-style">

26 .big {	26 .big {

27 height: 32px;	27 --iron-icon-height: 32px;

28 width: 32px;	28 --iron-icon-width: 32px;

29 }	29 }

30 </style>	30 </style>

31	31

32 The iron elements include several sets of icons.	32 The iron elements include several sets of icons.

33 To use the default set of icons, import `iron-icons.html` and use the `icon` at tribute to specify an icon:	33 To use the default set of icons, import `iron-icons.html` and use the `icon` at tribute to specify an icon:

34	34

35 <!-- import default iconset and iron-icon -->	35 <!-- import default iconset and iron-icon -->

36 <link rel="import" href="/components/iron-icons/iron-icons.html">	36 <link rel="import" href="/components/iron-icons/iron-icons.html">

37	37

38 <iron-icon icon="menu"></iron-icon>	38 <iron-icon icon="menu"></iron-icon>

39	39

40 To use a different built-in set of icons, import `iron-icons/<iconset>-icons.ht ml`, and	40 To use a different built-in set of icons, import `iron-icons/<iconset>-icons.ht ml`, and

41 specify the icon as `<iconset>:<icon>`. For example:	41 specify the icon as `<iconset>:<icon>`. For example:

42	42

43 <!-- import communication iconset and iron-icon -->	43 <!-- import communication iconset and iron-icon -->

44 <link rel="import" href="/components/iron-icons/communication-icons.html">	44 <link rel="import" href="/components/iron-icons/communication-icons.html">

45	45

46 <iron-icon icon="communication:email"></iron-icon>	46 <iron-icon icon="communication:email"></iron-icon>

47	47

48 You can also create custom icon sets of bitmap or SVG icons.	48 You can also create custom icon sets of bitmap or SVG icons.

49	49

50 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 `:

51	51

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

53	53

54 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

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

56	56

57 See [iron-icons](http://www.polymer-project.org/components/iron-icons/demo.html) for the default set of icons.	57 See [iron-icons](https://elements.polymer-project.org/elements/iron-icons?view=d emo:demo/index.html) for the default set of icons.

58	58

59	59

60 ### Styling	60 ### Styling

61	61

62 The following custom properties are available for styling:	62 The following custom properties are available for styling:

63	63

64 Custom property \| Description \| Default	64 Custom property \| Description \| Default

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

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

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

68	68

69 @group Iron Elements	69 @group Iron Elements

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

71 @demo demo/index.html	71 @demo demo/index.html

72 @hero hero.svg	72 @hero hero.svg

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

74 -->	74 -->

75	75

76 <style is="custom-style">

77 :root {

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

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

80 }

81 </style>

82

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

84	77

85 <style>	78 <style>

86 :host {	79 :host {

87 @apply(--layout-inline);	80 @apply(--layout-inline);

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

89 position: relative;	82 position: relative;

90	83

91 vertical-align: middle;	84 vertical-align: middle;

92	85

93 fill: currentcolor;	86 fill: currentcolor;

94	87

95 width: var(--iron-icon-width);	88 width: var(--iron-icon-width, 24px);

96 height: var(--iron-icon-height);	89 height: var(--iron-icon-height, 24px);

97 }	90 }

98 </style>	91 </style>

99	92

100 <template>	93 <template>

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

102 </template>	95 </template>

103	96

104 </dom-module>	97 </dom-module>

105

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

OLD	NEW