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
PolymerElements/iron-icons/iron-icons.html, and use the
icon attribute to specify which icon
from the icon set to use.
iron-iconset for more information about
how to use a custom icon set.
paper-icon-button as a link, wrap it in an anchor tag. Since
will already receive focus, you may want to prevent the anchor tag from receiving focus
as well by setting its tabindex to -1.
Style the button with CSS as you would a normal DOM element. If you are using the icons
iron-icons, they will inherit the foreground color of the button.
/* make a red "favorite" 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:
||The color of the disabled button||
||Selected/focus ripple color||
||Mixin for a button||
||Mixin for a disabled button||
||Mixin for button on hover||