CODEWITHSUNDEEP
angularangular-material
Kamalka Fernando
Kamalka Fernando

Reputation: 163

Importing MaterialIcon in Angular

I used below import statement in my angular project. But it is not working:

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

Upvotes: 0

Views: 755

Answers (2)

Dave Skender
Dave Skender

Reputation: 621

Make sure you're putting this reference in your module file, such as app.module.ts. It does not go in your component file.

/* app.module.ts | Angular 9.x */
import { NgModule, ModuleWithProviders } from '@angular/core';
import { AppComponent } from './app.component';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    MatIconModule
  ],
  exports: [
    ...
    MatIconModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Note: you can also put this in a different module file if you are organizing your modules differently; however, I've shown this in the root module here, so it would be available globally, in this example.

Make sure you also load the font. Adding it to the HEAD section of your index.html file is easiest. http://google.github.io/material-design-icons/#icon-font-for-the-web (method 1)

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

Then, you would use this in your component HTML as normal:

<mat-icon>edit</mat-icon>

More info: https://material.angular.io/components/icon

Upvotes: 1

j3ff
j3ff

Reputation: 6089

In addition to import MatIconModule into the module where is declared your component in which you want to use the icons:

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

@NgModule({
  imports: [
    MatIconModule,
  ]
})
export class ExampleModule { }

You must include Material Icons font to your index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Application</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">

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

  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

You'll be able to use the icons like this:

<mat-icon>favorite</mat-icon>

You can find a complete list of available icons here: https://material.io/resources/icons/

⚡ Working example: https://stackblitz.com/edit/stackoverflow-60028622

Upvotes: 1

Related Questions