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