Fix OOP <webview> resize and autosize.
[chromium-blink-merge.git] / third_party / polymer / v1_0 / components-chromium / paper-icon-button / README.md
blob96dbf8e0063844b5c1f33c3215d6af5673621f47
1 paper-icon-button
2 =================
4 Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
6 `paper-icon-button` is a button with an image placed at the center. When the user touches
7 the button, a ripple effect emanates from the center of the button.
9 `paper-icon-button` includes a default icon set.  Use `icon` to specify which icon
10 from the icon set to use.
12 ```html
13 <paper-icon-button icon="menu"></paper-icon-button>
14 ```
16 See [`iron-iconset`](#iron-iconset) for more information about
17 how to use a custom icon set.
19 Example:
21 ```html
22 <link href="path/to/iron-icons/iron-icons.html" rel="import">
24 <paper-icon-button icon="favorite"></paper-icon-button>
25 <paper-icon-button src="star.png"></paper-icon-button>
26 ```
28 Styling
29 -------
31 Style the button with CSS as you would a normal DOM element. If you are using the icons
32 provided by `iron-icons`, they will inherit the foreground color of the button.
34 ```html
35 <!-- make a red "favorite" button -->
36 <paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>
37 ```
39 By default, the ripple is the same color as the foreground at 25% opacity. You may
40 customize the color using this selector:
42 ```css
43 /* make #my-button use a blue ripple instead of foreground color */
44 #my-button::shadow #ripple {
45   color: blue;
47 ```
49 The opacity of the ripple is not customizable via CSS.