Angular Material Menu with Icons
September 26, 2022
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>
<mat-icon> is used with [matMenuTriggerFor] as following.
<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>
------
</mat-menu>
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>
import { Component } from '@angular/core';
@Component({
selector: 'app-menu',
templateUrl: './menu-app.component.html'
})
export class MenuAppComponent {
}
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-menu></app-menu>
`
})
export class AppComponent {
}
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.
