OLD | NEW |
| (Empty) |
1 | |
2 <!--- | |
3 | |
4 This README is automatically generated from the comments in these files: | |
5 paper-icon-button.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 --> | |
11 | |
12 [](https://travis-ci.org/PolymerElements/paper-icon-button) | |
13 | |
14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-icon-bu
tton)_ | |
15 | |
16 | |
17 ##<paper-icon-button> | |
18 | |
19 | |
20 Material design: [Icon toggles](https://www.google.com/design/spec/components/bu
ttons.html#buttons-toggle-buttons) | |
21 | |
22 `paper-icon-button` is a button with an image placed at the center. When the use
r touches | |
23 the button, a ripple effect emanates from the center of the button. | |
24 | |
25 `paper-icon-button` includes a default icon set. Use `icon` to specify which ic
on | |
26 from the icon set to use. | |
27 | |
28 <paper-icon-button icon="menu"></paper-icon-button> | |
29 | |
30 See [`iron-iconset`](#iron-iconset) for more information about | |
31 how to use a custom icon set. | |
32 | |
33 Example: | |
34 | |
35 <link href="path/to/iron-icons/iron-icons.html" rel="import"> | |
36 | |
37 <paper-icon-button icon="favorite"></paper-icon-button> | |
38 <paper-icon-button src="star.png"></paper-icon-button> | |
39 | |
40 ### Styling | |
41 | |
42 Style the button with CSS as you would a normal DOM element. If you are using th
e icons | |
43 provided by `iron-icons`, they will inherit the foreground color of the button. | |
44 | |
45 /* make a red "favorite" button */ | |
46 <paper-icon-button icon="favorite" style="color: red;"></paper-icon-button> | |
47 | |
48 By default, the ripple is the same color as the foreground at 25% opacity. You m
ay | |
49 customize the color using the `--paper-icon-button-ink-color` custom property. | |
50 | |
51 The following custom properties and mixins are available for styling: | |
52 | |
53 Custom property | Description | Default | |
54 ----------------|-------------|---------- | |
55 `--paper-icon-button-disabled-text` | The color of the disabled button | `--disa
bled-text-color` | |
56 `--paper-icon-button-ink-color` | Selected/focus ripple color | `--primary-text-
color` | |
57 `--paper-icon-button` | Mixin for a button | `{}` | |
58 `--paper-icon-button-disabled` | Mixin for a disabled button | `{}` | |
59 `--paper-icon-button-hover` | Mixin for button on hover | `{}` | |
60 | |
61 | |
OLD | NEW |