Name: paper-icon-button
Owner: PolymerElements
Description: A Material Design icon button
Created: 2015-04-27 23:53:11.0
Updated: 2018-05-07 18:05:48.0
Pushed: 2018-05-23 02:36:09.0
Homepage: https://www.webcomponents.org/element/PolymerElements/paper-icon-button
Size: 169
Language: HTML
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Material design: Icon toggles
paper-icon-button is a button with an image placed at the center. When the user touches
the button, a ripple effect emanates from the center of the button.
paper-icon-button does not include a default icon set. To use icons from the default
set, include PolymerElements/iron-icons/iron-icons.html, and use the icon attribute to specify which icon
from the icon set to use.
er-icon-button icon="favorite"></paper-icon-button>
er-icon-button icon="menu"></paper-icon-button>
er-icon-button icon="star"></paper-icon-button>
See iron-iconset for more information about
how to use a custom icon set.
Example:
k href="path/to/iron-icons/iron-icons.html" rel="import">
er-icon-button icon="favorite"></paper-icon-button>
er-icon-button src="star.png"></paper-icon-button>
To use paper-icon-button as a link, wrap it in an anchor tag. Since paper-icon-button
will already receive focus, you may want to prevent the anchor tag from receiving focus
as well by setting its tabindex to -1.
ref="https://www.polymer-project.org" tabindex="-1">
aper-icon-button icon="polymer"></paper-icon-button>
Style the button with CSS as you would a normal DOM element. If you are using the icons
provided by iron-icons, they will inherit the foreground color of the button.
ake a red "favorite" button */
er-icon-button icon="favorite" style="color: red;"></paper-icon-button>
By default, the ripple is the same color as the foreground at 25% opacity. You may
customize the color using the --paper-icon-button-ink-color custom property.
The following custom properties and mixins are available for styling:
| Custom property | Description | Default |
| — | — | — |
| --paper-icon-button-disabled-text | The color of the disabled button | --disabled-text-color |
| --paper-icon-button-ink-color | Selected/focus ripple color | --primary-text-color |
| --paper-icon-button | Mixin for a button | {} |
| --paper-icon-button-disabled | Mixin for a disabled button | {} |
| --paper-icon-button-hover | Mixin for button on hover | {} |