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

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

Issue 1766433002: Roll Polymer to 1.3.1 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 4 years, 9 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 iron-icon 1
2 ========= 2 <!---
3 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 ##&lt;iron-icon&gt;
21
4 The `iron-icon` element displays an icon. By default an icon renders as a 24px s quare. 22 The `iron-icon` element displays an icon. By default an icon renders as a 24px s quare.
5 23
6 Example using src: 24 Example using src:
7 25
8 ```html 26 ```html
9 <iron-icon src="star.png"></iron-icon> 27 <iron-icon src="star.png"></iron-icon>
10 ``` 28 ```
11 29
12 Example setting size to 32px x 32px: 30 Example setting size to 32px x 32px:
13 31
14 ```html 32 ```html
15 <iron-icon class="big" src="big_star.png"></iron-icon> 33 <iron-icon class="big" src="big_star.png"></iron-icon>
16 34
17 <style> 35 <style is="custom-style">
18 .big { 36 .big {
19 height: 32px; 37 --iron-icon-height: 32px;
20 width: 32px; 38 --iron-icon-width: 32px;
21 } 39 }
22 </style> 40 </style>
23 ``` 41 ```
24 42
25 The iron elements include several sets of icons. 43 The iron elements include several sets of icons.
26 To use the default set of icons, import `iron-icons.html` and use the `icon` at tribute to specify an icon: 44 To use the default set of icons, import `iron-icons.html` and use the `icon` att ribute to specify an icon:
27 45
28 ```html 46 ```html
29 <!-- import default iconset and iron-icon -->
30 <link rel="import" href="/components/iron-icons/iron-icons.html"> 47 <link rel="import" href="/components/iron-icons/iron-icons.html">
31 48
32 <iron-icon icon="menu"></iron-icon> 49 <iron-icon icon="menu"></iron-icon>
33 ``` 50 ```
34 51
35 To use a different built-in set of icons, import `iron-icons/<iconset>-icons.ht ml`, and 52 To use a different built-in set of icons, import the specific `iron-icons/<icons et>-icons.html`, and
36 specify the icon as `<iconset>:<icon>`. For example: 53 specify the icon as `<iconset>:<icon>`. For example, to use a communication icon , you would
54 use:
37 55
38 ```html 56 ```html
39 <!-- import communication iconset and iron-icon -->
40 <link rel="import" href="/components/iron-icons/communication-icons.html"> 57 <link rel="import" href="/components/iron-icons/communication-icons.html">
41 58
42 <iron-icon icon="communication:email"></iron-icon> 59 <iron-icon icon="communication:email"></iron-icon>
43 ``` 60 ```
44 61
45 You can also create custom icon sets of bitmap or SVG icons. 62 You can also create custom icon sets of bitmap or SVG icons.
46 63
47 Example of using an icon named `cherry` from a custom iconset with the ID `fruit `: 64 Example of using an icon named `cherry` from a custom iconset with the ID `fruit `:
48 65
49 ```html 66 ```html
50 <iron-icon icon="fruit:cherry"></iron-icon> 67 <iron-icon icon="fruit:cherry"></iron-icon>
51 ``` 68 ```
52 69
53 See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about 70 See [iron-iconset](iron-iconset) and [iron-iconset-svg](iron-iconset-svg) for mo re information about
54 how to create a custom iconset. 71 how to create a custom iconset.
55 72
56 See [iron-icons](http://www.polymer-project.org/components/iron-icons/demo.html) for the default set of icons. 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
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698