ryanburns23 / paper-icon-button

A Material Design icon button

Demo and API docs

<paper-icon-button>

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.

<paper-icon-button icon="favorite"></paper-icon-button>
<paper-icon-button icon="menu"></paper-icon-button>
<paper-icon-button icon="star"></paper-icon-button>

See iron-iconset for more information about how to use a custom icon set.

Example:

<link href="path/to/iron-icons/iron-icons.html" rel="import">

<paper-icon-button icon="favorite"></paper-icon-button>
<paper-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.

<a href="https://www.polymer-project.org" tabindex="-1">
  <paper-icon-button icon="polymer"></paper-icon-button>
</a>

Styling

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.

/* make a red "favorite" button */
<paper-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	{}