third_party/polymer/v1_0/components-chromium/iron-icon/README.md - Issue 1834313003: Remove unneeded files from third_party/polymer.

Side by Side Diff: third_party/polymer/v1_0/components-chromium/iron-icon/README.md

Issue 1834313003: Remove unneeded files from third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Restore bower.json files. Created 4 years, 8 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/CONTRIBUTING.md ('k') | third_party/polymer/v1_0/components-chromium/iron-icon/hero.svg » ('j') | third_party/polymer/v1_0/extract_inline_scripts.sh » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1

2 <!---

3

4 This README is automatically generated from the comments in these files:

5 iron-icon.html

6

7 Edit those files, and our readme bot will duplicate them over here!

8 Edit this file, and the bot will squash your changes :)

9

10 The bot does some handling of markdown. Please file a bug if it does the wrong

11 thing! https://github.com/PolymerLabs/tedium/issues

12

13 -->

14

15 [![Build status](https://travis-ci.org/PolymerElements/iron-icon.svg?branch=mast er)](https://travis-ci.org/PolymerElements/iron-icon)

16

17 _[Demo and API docs](https://elements.polymer-project.org/elements/iron-icon)_

18

19

20 ##<iron-icon>

21

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

23

24 Example using src:

25

26 ```html

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

28 ```

29

30 Example setting size to 32px x 32px:

31

32 ```html

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

34

35 <style is="custom-style">

36 .big {

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

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

39 }

40 </style>

41 ```

42

43 The iron elements include several sets of icons.

44 To use the default set of icons, import `iron-icons.html` and use the `icon` att ribute to specify an icon:

45

46 ```html

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

48

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

50 ```

51

52 To use a different built-in set of icons, import the specific `iron-icons/<icons et>-icons.html`, and

53 specify the icon as `<iconset>:<icon>`. For example, to use a communication icon , you would

54 use:

55

56 ```html

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

58

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

60 ```

61

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

63

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

65

66 ```html

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

68 ```

69

70 See [iron-iconset](iron-iconset) and [iron-iconset-svg](iron-iconset-svg) for mo re information about

71 how to create a custom iconset.

72

73 See the [iron-icons demo](iron-icons?view=demo:demo/index.html) to see the icons available

74 in the various iconsets.

75

76 To load a subset of icons from one of the default `iron-icons` sets, you can

77 use the [poly-icon](https://poly-icon.appspot.com/) tool. It allows you

78 to select individual icons, and creates an iconset from them that you can

79 use directly in your elements.

80

81 ### Styling

82

83 The following custom properties are available for styling:

84

85 \| Custom property \| Description \| Default \|

86 \| --- \| --- \| --- \|

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

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

89 \| `--iron-icon-fill-color` \| Fill color of the svg icon \| `currentcolor` \|

90 \| `--iron-icon-stroke-color` \| Stroke color of the svg icon \| none \|

91

92

OLD	NEW