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>