Angular Material provides a <mat-icon> component to display icons. These icons use the Material Icons font by default. You can find the list of Material Icons here. Icons can be defined as a text node inside the <mat-icon> element or using the fontIcon attribute.

Basic usage

Import MatIconModule.

import { MatIconModule } from '@angular/material/icon';

@Component({
  selector: 'app-icons',
  standalone: true,
  imports: [
    MatIconModule,
    ...
  ],
  templateUrl: './icons.component.html',
  styleUrl: './icons.component.scss',
})

Using icon name in fontIcon attribute value

  <mat-icon
    aria-label="info icon"
    fontIcon="info_outlined"
  ></mat-icon>

  <mat-icon
    aria-label="info icon"
    fontIcon="info"
  ></mat-icon>

Using Icon Name inside <mat-icon>

  <mat-icon aria-label="power settings icon">
    power_settings_new
  </mat-icon>

  <mat-icon aria-label="account tree icon">
    account_tree
  </mat-icon>

Some icons in the Material Icons library have outlined versions. Here are some examples.

  <mat-icon aria-hidden="false" aria-label="person icon">
    person
  </mat-icon>
  <mat-icon aria-hidden="false" aria-label="person icon">
    person_outlined
  </mat-icon>
  <mat-icon aria-hidden="false" aria-label="info icon">
    info 
  </mat-icon>
  <mat-icon aria-hidden="false" aria-label="info icon">
    info_outlined
  </mat-icon>
  <mat-icon aria-hidden="false" aria-label="delete icon">
    delete
  </mat-icon>
  <mat-icon aria-hidden="false" aria-label="delete icon">
    delete_outlined
  </mat-icon>
  <mat-icon aria-hidden="false" aria-label="help icon">
    help
  </mat-icon>
  <mat-icon aria-hidden="false" aria-label="help icon">
    help_outlined
  </mat-icon>
  <mat-icon aria-hidden="false" aria-label="play icon">
    play_circle
  </mat-icon>
  <mat-icon aria-hidden="false" aria-label="play icon">
    play_circle_outline
  </mat-icon>

When the icon is purely cosmetic and conveys no real semantic meaning, the element is marked with aria-hidden="true". <mat-icon> is marked as aria-hidden="true" by default. The <mat-icon> element can be a child of a <button> or <a> element.

Conclusion

The <mat-icon> component in Angular Material allows you to display icons from the Material Icons set. You can specify the icon either as the content of the element or by using the fontIcon attribute.