147

I have started using <mat-icon> from Angular Material, and I'm wondering if there is any official list of the names of all the included icons. A few months ago I found a page where a bunch of them were listed, but not all of them, and this site is not findable anymore.

Is there an official or exhaustive list of these icons out there somewhere?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Pablo
  • 1,672
  • 2
  • 9
  • 13

3 Answers3

113

As the icons listed on the website are slightly outdated, here is a forked list of the icons, maintained and updated by Jossef Harush Kadouri

The old Material.io link now redirects to the Icons page on Google Fonts.

There is also another icon font by Google that supports variable fonts which you can find on the same page by clicking on the Material Symbols option.

Anyway, the Angular Material team expects developers to include the Google Material Design Icon Font themselves (Google Fonts/self-host/whatever you fancy).

Edric
  • 24,639
  • 13
  • 81
  • 91
  • 3
    The material.io website doesn't include the complete list of icons. For example, the `file_upload` icon is not there, which is a very common icon. It took me a decent amount of time to find an appropriate upload icon for my app since the `cloud_upload` is not applicable in my case. – John Isaiah Carmona Apr 08 '19 at 09:33
  • @JohnIsaiahCarmona Although the `file_upload` icon is not listed, it's still included in the icon font. – Edric Jan 10 '20 at 07:34
  • Guys, one thing is Material Design, other the Angular Material. Read my answer here (it has a list of Angular Material icons): https://stackoverflow.com/questions/48998752/default-icon-list-of-angular-material-2/64215719#64215719 – Davidson Lima Oct 05 '20 at 20:37
19

The complete list of all the Material Icons is covered in Mat-Icon List : 900+ Angular Material Icons by Arunkumar Gudelli - July 15, 2020

TylerH
  • 20,799
  • 66
  • 75
  • 101
DiaMaBo
  • 1,879
  • 1
  • 18
  • 18
6

There are around 900+ Angular Material icons divided across 10+ categories. You can find the complete 900+ icon list here.

You need to load the Material Icons font CSS, in your module:

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

In your module, but on imports:

imports: [ (...), MatIconModule]

Finally, some examples in your HTML:

<mat-icon aria-hidden="false" aria-label="my clock">access_time</mat-icon>

<i>home</i> 
 <!--In Angular we can use mat-icon as well-->
 <mat-icon>home</mat-icon>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Arun
  • 205
  • 2
  • 4