Angular Material Icon (mat-icon) Example

In this Angular Material series, we will show you how to use the Angular Material Icon component with the working examples. An angular Material Icon is an essential component, to support the text in the whole UI/UX. Using mat-icon directive will make it easier to use vector-based icons in your Angular app. The supported format only icon fonts and SVG icons.

Table of Contents:

• Preparation
• Basic Icon Example
• SVGIcon Example
• MatIcon Properties

The following tools, frameworks, and libraries or modules are required for this tutorial.

1. Node.js
2. Angular 13
3. Angular Material
4. Terminal (Linux/Mac) or Node Command Line (Windows)
5. Text Editor or IDE (We use VSCode)

Let's get started with the main step!

Preparation

We will bundle all of these Angular Material Form Controls Select examples in one application. For that, we will prepare all required Angular 13 applications and Angular Material. Now, we are creating an Angular 13 app using Angular CLI which needs Node.js and NPM to install or update it. Make sure you have to install Node.js and NPM before installing or updating Angular CLI. To install or update an Angular CLI type this command.

sudo npm install -g @angular/cli

Next, create a new Angular app using Angular CLI by typing this command.

ng new material-icons

That command will create a new Angular app with the name `material-select` and pass all questions as 'Y' then the Angular CLI will automatically install the required NPM modules. After finished, go to the newly created Angular folder then run the Angular app for the first time.

cd ./material-icons
ng serve --open

Using that "--open" parameter will automatically open the Angular in your default web browser. Here's what the Angular default page looks like.

Next, type this command to install Angular Material using Angular CLI's install schematics after stopping the running Angular app.

ng add @angular/material

Leave all questions as default to finish the installation.

The package @angular/[email protected] will be installed and executed.
Would you like to proceed? (Y/n) Yes
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://mate
rial.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? (y/N) No
? Set up browser animations for Angular Material? (Y/n) Yes

Next, open the Angular application project with your text editor or IDE. Open and edit `src/app/app.module.ts` then add this required import MatIconModule.

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

Register the above modules to `@NgModule` imports.

  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatIconModule
  ],

Now, the Angular Material Icon modules are ready to use in Angular Components.

Basic Icon Example

To show a basic icon, simply, add this <mat-icon> directive to your Angular page. We will use the existing app.component.html for all examples in this tutorial. Just remove all of the contents in the <div class="content"> then add this basic icon directive.

<div class="content" role="main">
  <h3>Basic Icon</h3>
  <mat-icon>android</mat-icon>
</div>

You will see this icon in the body of the Angular page when running this Angular application by typing this command.

ng serve

SVGIcon Example

To show the SVGIcon, it's not simple as showing a basic icon. We need to register the SVG icon first. Open and edit src/app/app.component.ts then add these imports.

import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material/icon';

Then add a constant variable before the @Component that pointing to the SVG icon image data.

const FRIES_ICON = `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M18 11V6H15V4H12V2H8V5H6V11H5L7 22H17L19 11H18M15.86 11C15.7 11.61 15.4 12.16 15 12.62V8.62L17 9.62V11H15.86M17 7V8.5L15 7.5V7H17M12 5H14V8.5L12 9.5V5M12 10.62L14 9.62V13.45C13.41 13.8 12.73 14 12 14V10.62M11 13.86C10.21 13.65 9.5 13.22 9 12.62V9.62L11 8.62V13.86M9 3H11V7.5L10 8V5H9V3M7 6H9V8.5L8 9V11H7V6Z" />
</svg>`

We got that SVG icon from the Material Design Icon. Next,  add the constructor inside the AppComponent class.

export class AppComponent {
  title = 'material-icons';

  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIconLiteral('french-fries', sanitizer.bypassSecurityTrustHtml(FRIES_ICON));
  }
}

In the src/app/app.component.html add the same <mat-icon> directive with the svgIcon property.

  <h3>SVG Icon</h3>
  <mat-icon svgIcon="french-fries" aria-hidden="false" aria-label="This is the SVG icon"></mat-icon>

Then here it is, the SVG Icon looks like.

MatIcon Properties Example

Below are the examples of MatIcon using its properties except for svgIcon that was used previously. 

Color property example:

  <h3>Icon Propeties</h3>
  <h4>Color</h4>
  <mat-icon aria-hidden="true" color="primary" aria-label="Color property">paid</mat-icon>

Font Icon and Font Set properties example:

To use a custom font set, for example, we will use Font Awesome. First, we need to install Font Awesome to Angular application. Type this command to install it using NPM.

npm install font-awesome --save

Next, open and edit src/styles.scss then add these lines.

$fa-font-path: "../fonts";
@import '~font-awesome/scss/font-awesome.scss';

Next, open and edit src/app/app.component.ts then register font-awesome in the constructor body.

  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIconLiteral('french-fries', sanitizer.bypassSecurityTrustHtml(FRIES_ICON));
    iconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }

Finally, in the app.component.html add this icon directive.

  <h4>Font Set and Font Icon</h4>
  <mat-icon aria-hidden="true" fontSet="fontawesome" fontIcon="fa-book" aria-label="Color property"></mat-icon>

And here are what the icons look like.

That it's, some of the examples using Material Icon in Angular application. You can get the full source code from our GitHub.

If you don’t want to waste your time design your own front-end or your budget to spend by hiring a web designer then Angular Templates is the best place to go. So, speed up your front-end web development with premium Angular templates. Choose your template for your front-end project here.

That just the basic. If you need more deep learning about MEAN Stack, Angular, and Node.js, you can take the following cheap course:

• Master en JavaScript: Aprender JS, jQuery, Angular 8, NodeJS
• Angular 8 - Complete Essential Guide
• Learn Angular 8 by creating a simple Full Stack Web App
• Angular 5 Bootcamp FastTrack
• Angular 6 - Soft & Sweet
• Angular 6 with TypeScript

Thanks!