Icons

Install Material Icons and/or Symbols modules.

npm install --save-dev material-icons material-symbols

Load Material Icons and/or Symbols in your SCSS file. You can define an alias for very long default class name, e.g. .mat-icon for .material-icons-outlined. 

@use 'material-icons';
@use 'material-symbols';

.mat-icon {
  @extend .material-icons-outlined;
}
.mat-symbol {
  @extend .material-symbols-outlined;
}

Use an icon name in a tag with class .mat-symbol or .mat-icon. See the complete list of all icon names here.

Example of Material Symbols

home
home
search
search
menu
menu
settings
settings
start
start
favorite
favorite
apps
apps
sync
sync
person
person
group
group
groups
groups
face
face
face_3
face_3
eco
eco
public
public
share
share
sunny
sunny
recycling
recycling
cloudy
cloudy
language
language
calendar_month
calendar_month
warning
warning
cancel
cancel
delete
delete
//- load icons list
- const matIcons = require('./mat-icons.json').symbols
each name in matIcons
  .mat-symbol= name
{
  "symbols": [
    "home",
    "search",
    "menu",
    "settings",
    "start",
    "favorite",
    "apps",
    "sync",
    "person",
    "group",
    "groups",
    "face",
    "face_3",
    "eco",
    "public",
    "share",
    "sunny",
    "recycling",
    "cloudy",
    "language",
    "calendar_month",
    "warning",
    "cancel",
    "delete"
  ]
}

@use 'material-symbols';

.mat-symbol {
  @extend .material-symbols-outlined;
}