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
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
//- 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;
}