Where can I get the Material Icon 'Bulb' or other missing Angular Material icons?

Question

Situation

I was looking for the Material bulb icon. At this page it is stated as from Google, but I couldn't find it on the official Material icon resource https://material.io/resources/icons/?style=baseline .

Our designer had this bulb too and used a Google Material template.

What I want to achieve?

I need the shortcut to use it for the <mat-icon> component, which I currently don't have. Like this:

<mat-icon>bulb</mat-icon>

A pratical example would be: https://stackblitz.com/edit/angular-oksuuj

In this, the icon file_download does exist in the Angular MatIconModule, but not in the official material.io page.

Answer 1

I found the solution for that. Google's official icon library on Github is not maintained anymore, but there is one fork which contains the latest icons and a updated page.

material-icons.scss

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../font/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
  local('MaterialIcons-Regular'),
  url(../font/MaterialIcons-Regular.woff2) format('woff2'),
  url(../font/MaterialIcons-Regular.woff) format('woff'),
  url(../font/MaterialIcons-Regular.ttf) format('truetype');
}

I just replaced my font files locally with those in this repo (fork of the material icon repo):

• Repo https://github.com/jossef/material-design-icons-iconfont
• Demo Page: https://jossef.github.io/material-design-icons-iconfont/
• Font files: https://github.com/jossef/material-design-icons-iconfont/tree/master/dist/fonts

and then it worked using lightbulb as shortcut.

<mat-icon>lightbulb</mat-icon>

Answer 2

I had an interesting issue, maybe this helps a few people.

If you're looking for that piece of code to import the google fonts, you may copy paste the code into your IDE. If you do so, pay attention to change the double quotes from those used in books to those used for programming. You'll get no error, but it just won't work.

So always copy this one :

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

Not this one:

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