5

I need to see a default list of Icons for Angular Material https://material.angular.io/components/icon/overview

I am not using Font Awesome and Google Fonts

Micky Q
  • 129
  • 1
  • 1
  • 11
  • @angular/material 's mat-icon dose not come with any icons, its designed to be used with an icon font. By default it's configured to work with Material Icons font from google fonts api. IE you need a – Wilhelmina Lohan Feb 26 '18 at 23:45
  • 1
    Does this answer your question? [Is there an official list of all mat-icons in Angular?](https://stackoverflow.com/questions/50637666/is-there-an-official-list-of-all-mat-icons-in-angular) – TylerH Jan 04 '23 at 14:27

3 Answers3

9

Is this what you're looking for?

Lars
  • 710
  • 5
  • 19
  • well I am looking for a list where I can select icons available and choose from them is there a web page which list them – Micky Q Feb 27 '18 at 04:03
0

The Angular Material Icon component actually isn't pre-loaded with the Google Material Design Icons, I'm afraid.

According to the documentation for Icon overview:

By default, <mat-icon> expects the Material icons font. (You will still need to include the HTML to load the font and its CSS, as described in the link).

This is located under the "Font icons with ligatures" header. I'm also emphasizing on the word "expects" here

And it even states under the Getting Started guide that you should add the Material Icons font to your index.html:

If you want to use the mat-icon component with the official Material Design Icons, load the icon font in your index.html.

So, you have to load an icon font (or an SVG iconset) in your app. You'll have to do it yourself.

Here's some font icons/ SVG icons you can use:

Edric
  • 24,639
  • 13
  • 81
  • 91
  • 2
    No, you're wrong. There are default icons ready to be used by name. Read my answer here (it has a list of Angular Material icons): https://stackoverflow.com/a/64215719/6166911 – Davidson Lima Oct 05 '20 at 20:29
0

If you going to use Lars answer. The following code will set the icon in your angular project

<span class="material-icons">home</span>
Isuru Dilshan
  • 719
  • 9
  • 18