Icon Buttons

Open in Figma View all renders 
<div class="btn-icon">
  <button aria-labelledby="icon-button-label">
    <span class="material-symbols-rounded" aria-hidden="true">
        arrow_forward
    </span>
  </button>
  <span class="btn-icon__label" id="icon-button-label">label</span>
</div>
<div class="btn-icon btn-icon--secondary">
  <button aria-labelledby="icon-button-label-secondary">
    <span class="material-symbols-rounded" aria-hidden="true">
        arrow_forward
    </span>
  </button>
  <span  class="btn-icon__label" id="icon-button-label-secondary">label</span>
</div>

Contrast icon butons

 <div class="btn-icon btn-icon--contrast">
  <button aria-labelledby="icon-button-label-contrast">
    <span class="material-symbols-rounded" aria-hidden="true">
        arrow_forward
    </span>
  </button>
  <span  class="btn-icon__label" id="icon-button-label-contrast">label</span>
</div>
<div class="btn-icon btn-icon--contrast btn-icon--secondary">
  <button aria-labelledby="icon-button-label-contrast-secondary">
    <span class="material-symbols-rounded" aria-hidden="true">
        arrow_forward
    </span>
  </button>
  <span  class="btn-icon__label" id="icon-button-label-contrast-secondary">label</span>
</div>

Links styled as icon buttons

<div class="btn-icon">
  <a href="#" aria-labelledby="icon-button-label-link">
    <span class="material-symbols-rounded" aria-hidden="true">
        arrow_forward
    </span>
  </a>
  <span  class="btn-icon__label" id="icon-button-label-link">label</span>
</div>
<div class="btn-icon btn-icon--secondary">
  <a href="#" aria-labelledby="icon-button-label-link-secondary">
    <span class="material-symbols-rounded" aria-hidden="true">
        arrow_forward
    </span>
  </a>
  <span  class="btn-icon__label" id="icon-button-label-link-secondary">label</span>
</div>

Variations and modifiers

Icon button sizes

Icon buttons can be modified to be small or extra small - they are medium by default. 

<div class="btn-icon btn-icon--small">
  <button aria-labelledby="icon-button-label-small">
    <span class="material-symbols-rounded" aria-hidden="true">
        arrow_forward
    </span>
  </button>
  <span  class="btn-icon__label"  id="icon-button-label-small">label</span>
</div>
<div class="btn-icon btn-icon--xsmall">
  <button aria-labelledby="icon-button-label-xsmall">
    <span class="material-symbols-rounded" aria-hidden="true">
        arrow_forward
    </span>
  </button>
  <span  class="btn-icon__label" id="icon-button-label-xsmall">label</span>
</div>

Icon button without label

An icon button can be rendered without a label. The label must still be present and referred to by the aria-labelled by attribute on the button element. 

<div class="btn-icon btn-icon--no-label">
  <button aria-labelledby="icon-button-label-no-label">
    <span class="material-symbols-rounded" aria-hidden="true">
        arrow_forward
    </span>
  </button>
  <span  class="btn-icon__label" id="icon-button-label-no-label">label</span>
</div>