Icon button

Standard

<button type="button" class="icon-button">
  <span class="material-icons">bookmark_border</span>
</button>
<button type="button" class="icon-button icon-button--active">
  <span class="material-icons">bookmark</span>
</button>
<button type="button" class="icon-button" disabled>
  <span class="material-icons">bookmark_border</span>
</button>

Filled

<button type="button" class="icon-button icon-button--filled">
  <span class="material-icons">bookmark_border</span>
</button>
<button type="button" class="icon-button icon-button--filled icon-button--active">
  <span class="material-icons">bookmark</span>
</button>
<button type="button" class="icon-button icon-button--filled" disabled>
  <span class="material-icons">bookmark_border</span>
</button>

Filled tonal

<button type="button" class="icon-button icon-button--filled-tonal">
  <span class="material-icons">bookmark_border</span>
</button>
<button type="button" class="icon-button icon-button--filled-tonal icon-button--active">
  <span class="material-icons">bookmark</span>
</button>
<button type="button" class="icon-button icon-button--filled-tonal" disabled>
  <span class="material-icons">bookmark_border</span>
</button>

Outlined

<button type="button" class="icon-button icon-button--outlined">
  <span class="material-icons">bookmark_border</span>
</button>
<button type="button" class="icon-button icon-button--outlined icon-button--active">
  <span class="material-icons">bookmark</span>
</button>
<button type="button" class="icon-button icon-button--outlined" disabled>
  <span class="material-icons">bookmark_border</span>
</button>