Angular Material Icons

How to Use Material Symbols in Angular

1. Load the font in src/index.html. This loads every axis of the Outlined style:

   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

   Copy to clipboard
2. Import MatIconModule in your standalone component: imports: [MatIconModule] from @angular/material/icon.
3. Use the icon by its name: <mat-icon>home</mat-icon>. To use Rounded or Sharp everywhere, set the default font set once:

   // app.config.ts
   import { ApplicationConfig, inject, provideAppInitializer } from '@angular/core';
   import { MatIconRegistry } from '@angular/material/icon';
   
   export const appConfig: ApplicationConfig = {
     providers: [
       provideAppInitializer(() => {
         inject(MatIconRegistry).setDefaultFontSetClass('material-symbols-rounded');
       }),
     ],
   };

   Copy to clipboard

Material Symbols vs Material Icons

Renamed Icons

327 legacy names are not in Material Symbols. Most _outline icons were folded into the base icon, because Symbols draws the outline by default and fills it with the FILL axis. The most used ones:

• help_outline → help
• add_circle_outline → add_circle
• check_circle_outline → check_circle
• person_outline → person
• delete_outline → delete
• error_outline → error
• play_circle_filled → play_circle
• mail_outline → mail
• play_circle_outline → play_circle
• chat_bubble_outline → chat_bubble
• star_outline → star
• work_outline → work
• drive_file_rename_outline → drive_file_rename
• info_outline → info
• directions_car_filled → directions_car
• insert_chart_outlined → insert_chart
• pause_circle_outline → pause_circle
• pause_circle_filled → pause_circle
• home_filled → home
• directions_bus_filled → directions_bus
• lock_outline → lock
• lightbulb_outline → lightbulb
• pie_chart_outline → pie_chart
• directions_boat_filled → directions_boat

Frequently Asked Questions

Why does my mat-icon show the icon name as text instead of the icon?

The icon font is not loaded, or mat-icon is using a different font set. Add the Material Symbols <link> to index.html, and make sure the font set class matches it: either set fontSet on the icon or call MatIconRegistry.setDefaultFontSetClass once at startup.

What is the difference between Material Icons and Material Symbols?

Material Symbols is the current icon set, built as a variable font with fill, weight, grade and optical size axes. The older Material Icons font is no longer updated. Most names are the same, but a few hundred legacy names (often ending in _outline) were dropped or renamed.

How do I use Rounded or Sharp icons with mat-icon?

Load the Material Symbols Rounded or Sharp stylesheet, then either add fontSet="material-symbols-rounded" to each mat-icon, or make it the default with MatIconRegistry.setDefaultFontSetClass('material-symbols-rounded').

How do I make a Material Symbols icon filled?

Material Symbols uses the FILL axis instead of separate filled icons. Set font-variation-settings: 'FILL' 1 on the icon's CSS class, or on a single icon with a class of your own.

Can I change the icon colour and size?

Yes. Icons are text, so color sets the colour and font-size sets the size. For mat-icon you can also use the color input with your theme colours. Use the optical size axis (opsz) to keep strokes balanced at very small or large sizes.

How do I use an SVG icon with MatIconRegistry?

Download the SVG from an icon page, save it in your public folder and register it with MatIconRegistry.addSvgIcon. Then use <mat-icon svgIcon="name">. SVG icons avoid loading an icon font at all.

Is the icon font heavy?

The full Material Symbols variable font is several megabytes. Request only the axes you use, or add &icon_names= to the Google Fonts URL to download just the icons your app uses.

Sources

Icon names, categories and tags come from Google Fonts' icon catalogue. Last updated October 10, 2026.

• Google Fonts: Material Symbols & Icons
• Material Symbols developer guide
• Angular Material: Icon component (mat-icon)
• Angular Material icon docs source (icon.md)

Upgrading an older app first? The Angular Material Upgrade Planner lists every step, including the move to Material 3 theming.