Angular Material Icons List

When working with Angular Material, icons are commonly used. Angular Material provides the component for displaying icons, but it doesn’t come with its own icon library. Instead, it used Google’s Material Icons.
So, in this document we will see how to integrate and use them effectively in an Angular project.

Step 1: Add Material Icons to Your Project

In your index.html, include the Material Icons font:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

This line loads the default Material Icons font set (filled style)

Step 2: Using in Templates

Once the font is loaded, you can use the component anywhere in your templates

<mat-icon>home</mat-icon>
<mat-icon>menu</mat-icon>
<mat-icon>account_circle</mat-icon>

Whatever text you put inside must match a name from the official icon list.

Step 3: Finding Icon Names

There’s no built-in icon list in Angular Material itself. The icons are maintained by Google, and the list is available here: Material Symbols & Icons – Google Fonts

You can search by name, category, or keyword. The name shown under each icon is what you’ll use in your mat-icon tag

Optional: Using Different Icon Styles

By default, Angular Material loads the filled icon style. If you want to use outlined, rounded, two-tone, or sharp versions, you’ll need to load those font styles explicitly.

Using Outlined or Rounded Icons
1. Load the additional font style in index.html:

<!-- Outlined icons -->
<link href="https://fonts.googleapis.com/icon?family=
Material+Icons+Outlined" rel="stylesheet">

<!-- Rounded icons -->
<link href="https://fonts.googleapis.com/icon?family=
Material+Icons+Round" rel="stylesheet">

2. Use them in your template:

<mat-icon fontSet="material-icons-outlined">home</mat-icon>
<mat-icon fontSet="material-icons-round">home</mat-icon>

Make sure the fontSet value matches the included style.

Also Read:

Angular Resolver