Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
fix(icon-button): Update
Browse files Browse the repository at this point in the history
  • Loading branch information
williamernest committed Jun 18, 2018
1 parent c8924ba commit d51f5d6
Showing 1 changed file with 18 additions and 1 deletion.
19 changes: 18 additions & 1 deletion packages/mdc-icon-button/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ npm install @material/icon-button
```scss
@import "@material/icon-button/mdc-icon-button";
```

### JavaScript Instantiation

The icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.
Expand Down Expand Up @@ -81,7 +82,7 @@ The icon button can be used to toggle between an on and off icon. To style an ic
data-toggle-on-content="favorite"
data-toggle-on-label="Remove from favorites"
data-toggle-off-content="favorite_border"
data-toggle-off-label="Add to favorites">favorites_border</button>
data-toggle-off-label="Add to favorites">favorite_border</button>
```

```js
Expand All @@ -101,6 +102,22 @@ Attribute | Description
`data-toggle-<TOGGLE STATE>-content` | The text content to set on the element. Note that if an inner icon is used, the text content will be set on that element instead.
`data-toggle-<TOGGLE STATE>-class` | A CSS class to apply to the icon element. The same rules regarding inner icon elements described for `content` apply here as well.

#### Icon Button Toggle with Font Awesome

The icon button toggle can be used with other font libraries such as Font Awesome.

```html
<button id="star-this-item"
class="mdc-icon-button"
aria-label="Star this item"
aria-hidden="true"
aria-pressed="true"
data-toggle-on-class="fa-star"
data-toggle-on-label="Remove star"
data-toggle-off-class="fa-star-o"
data-toggle-off-label="Star this item"><i class="fa fa-2x fa-star"></i></button>
```

### Icons

The icon button can be used with a standard icon library such as Material Icons or Font Awesome, or with an `svg`.
Expand Down

0 comments on commit d51f5d6

Please sign in to comment.