Angular Material Menu with Icons

By Arvind Rai, September 26, 2022

On this page we will learn to create menu with icons in our Angular Material application.
1. Angular Material menu supports <mat-icon> element.
2. Menu items are created using mat-menu-item attribute. The mat-menu-item uses <mat-icon> as following.

<button mat-menu-item>
  <mat-icon>book</mat-icon>
  <span>Book</span>
</button>

3. The <mat-icon> is used with [matMenuTriggerFor] as following.

<button mat-icon-button [matMenuTriggerFor]="menu">
  <mat-icon>more_vert</mat-icon>
</button>

4. We can create sub-menu with icon as following.

<mat-menu #menu="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="phone">
    <mat-icon>phone</mat-icon>
    <span>Telephone</span>
  </button>
  ------
</mat-menu>

5. To use Angular Material menu with icon, we should import following modules.

import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';

Now we will create a complete example to use menu with icons.

Technologies Used

Find the technologies being used in our example.
1. Angular 13.1.0
2. Angular Material 13.3.9
3. Node.js 12.20.0
4. NPM 8.2.0

Complete Example

menu-app.component.html

<button mat-icon-button [matMenuTriggerFor]="menu">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="phone">
    <mat-icon>phone</mat-icon>
    <span>Telephone</span>
  </button>
  <button mat-menu-item>
    <mat-icon>book</mat-icon>
    <span>Book</span>
  </button>
  <button mat-menu-item>
    <mat-icon>comment</mat-icon>
    <span>Comment</span>
  </button>
  <button mat-menu-item>
    <mat-icon>email</mat-icon>
    <span>Email</span>
  </button>  
</mat-menu>
<mat-menu #phone="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item>
    <mat-icon>voicemail</mat-icon>
    <span>Check voice mail</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
</mat-menu>

menu-app.component.ts

import { Component } from '@angular/core';

@Component({
	selector: 'app-menu',
	templateUrl: './menu-app.component.html'
})
export class MenuAppComponent {
}

app.component.ts

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `
           <app-menu></app-menu>
          `
})
export class AppComponent {
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';
import { MenuAppComponent } from './menu-app.component';


@NgModule({
      imports: [
            BrowserModule,
            BrowserAnimationsModule,
            MatMenuModule,
            MatIconModule,
	    MatButtonModule
      ],
      declarations: [
            AppComponent,
            MenuAppComponent
      ],
      providers: [
      ],
      bootstrap: [
            AppComponent
      ]
})
export class AppModule { }

Run Application

To run the application, find the steps.
1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.