Is there an official or exhaustive list of all mat-icons in Angular?

Question

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?

Benavides

Answer 1

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

• Material Design Icons DX (MDIDX)

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).

Ticktack

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. – Bazluke

@JohnIsaiahCarmona Although the file_upload icon is not listed, it's still included in the icon font. – Ticktack

Guys, one thing is Material Design, other the Angular Material. Read my answer here (it has a list of Angular Material icons): #48999252 – Knot

Answer 2

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

Madelina

Answer 3

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>

Giacobo

Answer 4

Yes there is a list:

• All of them are here => https://fonts.google.com/icons

By default, mat-icon expects the Material icons font.

But you could still define your own using MatIconRegistry.

For people looking for an example on using it for custom svg icons:

COUNTRY_CODES = [
  "US",
  "GB",
  "MA",
]

COUNTRY_CODES.forEach((code) => {
  this.matIconRegistry.addSvgIcon(
    `country_${code.toLowerCase()}`,
    this.domSanitizer.bypassSecurityTrustResourceUrl(
      `${this.flagsSource}/svg/${code.toLowerCase()}.svg`,
    ),
  )
})

For a while there were some icons missing in declared list, like the logout icon (or login, can't remember exactly which one it was), and i discovered you could just use them with their raw codePoint.

Here's the TRUE full list of icons alias + their codepoint => https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIcons-Regular.codepoints

For more details, you can check this: https://github.com/angular/components/blob/main/src/material/icon/icon.md

Zodiac