ipsos-components/src/demo-app/a11y/icon/icon-a11y.html

Material Design components for Angular

<section>
  <h2>Fingerprint status</h2>
  <p>Showing a status message with a purely decorative icon</p>
  <mat-icon color="primary">fingerprint</mat-icon>
  Your fingerprint was recorded!
</section>

<section>
  <h2>Delete icon button </h2>
  <p>Showing a button with interactive icon which can perform an action</p>
  <button mat-icon-button aria-label="Delete" (click)="deleteIcon()">
    <mat-icon color="accent">delete</mat-icon>
  </button>
</section>

<section>
  <h2>Home link </h2>
  <p>Showing a link with interactive icon</p>
  <a mat-icon-button aria-label="Home" href="http://www.google.com">
    <mat-icon color="warn">home</mat-icon>
  </a>
</section>

<section>
  <h2>Done status </h2>
  <p>Showing a status indicator with an indicator icon</p>
  <mat-icon color="primary">done</mat-icon>
  <span class="cdk-visually-hidden">Done</span>
  Tasks
</section>