third_party/polymer/v1_0/components-chromium/paper-icon-button/README.md

   1 paper-icon-button
   2 =================
   3
   4 Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
   5
   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.
   8
   9 `paper-icon-button` includes a default icon set.  Use `icon` to specify which icon
  10 from the icon set to use.
  11
  12 ```html
  13 <paper-icon-button icon="menu"></paper-icon-button>
  14 ```
  15
  16 See [`iron-iconset`](#iron-iconset) for more information about
  17 how to use a custom icon set.
  18
  19 Example:
  20
  21 ```html
  22 <link href="path/to/iron-icons/iron-icons.html" rel="import">
  23
  24 <paper-icon-button icon="favorite"></paper-icon-button>
  25 <paper-icon-button src="star.png"></paper-icon-button>
  26 ```
  27
  28 Styling
  29 -------
  30
  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.
  33
  34 ```html
  35 <!-- make a red "favorite" button -->
  36 <paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>
  37 ```
  38
  39 By default, the ripple is the same color as the foreground at 25% opacity. You may
  40 customize the color using this selector:
  41
  42 ```css
  43 /* make #my-button use a blue ripple instead of foreground color */
  44 #my-button::shadow #ripple {
  45   color: blue;
  46 }
  47 ```
  48
  49 The opacity of the ripple is not customizable via CSS.