README.md
1
2 <!---
3
4 This README is automatically generated from the comments in these files:
5 paper-icon-button-light.html 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 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/paper-icon-button.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-icon-button)
16
17 _[Demo and API docs](https://elements.polymer-project.org/elements/paper-icon-button)_
18
19
20 ##<paper-icon-button>
21
22 Material design: [Icon toggles](https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons)
23
24 `paper-icon-button` is a button with an image placed at the center. When the user touches
25 the button, a ripple effect emanates from the center of the button.
26
27 `paper-icon-button` includes a default icon set. Use `icon` to specify which icon
28 from the icon set to use.
29
30 ```html
31 <paper-icon-button icon="menu"></paper-icon-button>
32 ```
33
34 See [`iron-iconset`](iron-iconset) for more information about
35 how to use a custom icon set.
36
37 Example:
38
39 ```html
40 <link href="path/to/iron-icons/iron-icons.html" rel="import">
41
42 <paper-icon-button icon="favorite"></paper-icon-button>
43 <paper-icon-button src="star.png"></paper-icon-button>
44 ```
45
46 To use `paper-icon-button` as a link, wrap it in an anchor tag. Since `paper-icon-button`
47 will already receive focus, you may want to prevent the anchor tag from receiving focus
48 as well by setting its tabindex to -1.
49
50 ```html
51 <a href="https://www.polymer-project.org" tabindex="-1">
52 <paper-icon-button icon="polymer"></paper-icon-button>
53 </a>
54 ```
55
56 ### Styling
57
58 Style the button with CSS as you would a normal DOM element. If you are using the icons
59 provided by `iron-icons`, they will inherit the foreground color of the button.
60
61 ```html
62 /* make a red "favorite" button */
63 <paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>
64 ```
65
66 By default, the ripple is the same color as the foreground at 25% opacity. You may
67 customize the color using the `--paper-icon-button-ink-color` custom property.
68
69 The following custom properties and mixins are available for styling:
70
71 | Custom property | Description | Default |
72 | --- | --- | --- |
73 | `--paper-icon-button-disabled-text` | The color of the disabled button | `--disabled-text-color` |
74 | `--paper-icon-button-ink-color` | Selected/focus ripple color | `--primary-text-color` |
75 | `--paper-icon-button` | Mixin for a button | `{}` |
76 | `--paper-icon-button-disabled` | Mixin for a disabled button | `{}` |
77 | `--paper-icon-button-hover` | Mixin for button on hover | `{}` |
78
79
80
81 <!-- No docs for <paper-icon-button-light> found. -->
82