Angular Material Button with Icon
October 21, 2022
On this page we will learn to use Material button with icon in our Angular Material application.
1. Material icon is created using
<mat-icon>
element. Material button with icon can be created using <mat-icon>
element within Material <button>
.
2. To create Material button with icon, Material
<button>
can use mat-icon-button
, mat-fab
and mat-mini-fab
attributes.
3. We can also create Material button with icon and text using
<mat-icon>
and text within <button>
element with mat-icon-button
attribute.
4. To create Material button with icon, we need to import following modules in our application module.
import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon';
Contents
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
Buttons with Icons
Material icon is created using<mat-icon>
element. Material button with icon is created using <mat-icon>
element within Material <button>
element with mat-icon-button
, mat-fab
and mat-mini-fab
attributes.
1. Using mat-icon-button :
The
mat-icon-button
provides circular button with a transparent background, meant to contain an icon.
<button mat-icon-button> <mat-icon>menu</mat-icon> </button>
The
mat-fab
provides circular button with elevation that can contain an icon.
<button mat-fab> <mat-icon>menu</mat-icon> </button>
The
mat-mini-fab
provides circular button with smaller elevation that can contain an icon.
<button mat-mini-fab> <mat-icon>menu</mat-icon> </button>
Buttons with Icons and Text
We create Material button with icon and text usingmat-icon-button
attribute.
<button mat-icon-button> <mat-icon>menu</mat-icon> <span>Menu</span> </button>
Buttons with SVG Icons
Find the code to create Material button with SVG icon.<button mat-icon-button> <mat-icon svgIcon="menu_icon"></mat-icon> </button>
Buttons with SVG Icons and Text
Find the code to create Material button with SVG icon and text.<button mat-icon-button> <mat-icon svgIcon="menu_icon"></mat-icon> <span>Menu</span> </button>
Complete Example
example.component.html<h3>Buttons with Icons (mat-icon-button)</h3> <table> <tr> <td> <button mat-icon-button color="primary"> <mat-icon>attach_file</mat-icon> </button> </td> <td> <button mat-icon-button color="primary"> <mat-icon>menu</mat-icon> </button> </td> </tr> </table> <h3>Buttons with Icons (mat-fab)</h3> <table> <tr> <td> <button mat-fab color="primary"> <mat-icon>attach_file</mat-icon> </button> </td> <td> <button mat-fab color="primary"> <mat-icon>menu</mat-icon> </button> </td> </tr> </table> <h3>Buttons with Icons (mat-mini-fab)</h3> <table> <tr> <td> <button mat-mini-fab color="primary"> <mat-icon>attach_file</mat-icon> </button> </td> <td> <button mat-mini-fab color="primary"> <mat-icon>menu</mat-icon> </button> </td> </tr> </table> <h3>Buttons with Icons and Text</h3> <table> <tr> <td> <button mat-icon-button color="primary"> <mat-icon>attach_file</mat-icon> <span>Attach</span> </button> </td> </tr> <tr> <td> <button mat-icon-button color="primary"> <mat-icon>menu</mat-icon> <span>Menu</span> </button> </td> </tr> </table> <h3>Buttons with SVG Icons</h3> <table> <tr> <td> <button mat-icon-button color="primary"> <mat-icon svgIcon="attach_icon"></mat-icon> </button> </td> <td> <button mat-icon-button color="primary"> <mat-icon svgIcon="menu_icon"></mat-icon> </button> </td> </tr> </table> <h3>Buttons with SVG Icons and Text</h3> <table> <tr> <td> <button mat-icon-button color="primary"> <mat-icon svgIcon="attach_icon"></mat-icon> <span>Attach</span> </button> </td> </tr> <tr> <td> <button mat-icon-button color="primary"> <mat-icon svgIcon="menu_icon"></mat-icon> <span>Menu</span> </button> </td> </tr> </table>
import { Component } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import { MatIconRegistry } from '@angular/material/icon'; import { ATTACH_ICON, MENU_ICON } from './svg.icons'; @Component({ selector: 'app-user', templateUrl: './example.component.html' }) export class ExampleComponent { constructor(private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) { iconRegistry.addSvgIconLiteral('attach_icon', sanitizer.bypassSecurityTrustHtml(ATTACH_ICON)); iconRegistry.addSvgIconLiteral('menu_icon', sanitizer.bypassSecurityTrustHtml(MENU_ICON)); } }
export const ATTACH_ICON = `<svg class="svg-icon" viewBox="0 0 20 20"> <path d="M4.317,16.411c-1.423-1.423-1.423-3.737,0-5.16l8.075-7.984c0.994-0.996,2.613-0.996,3.611,0.001C17,4.264,17,5.884,16.004,6.88l-8.075,7.984c-0.568,0.568-1.493,0.569-2.063-0.001c-0.569-0.569-0.569-1.495,0-2.064L9.93,8.828c0.145-0.141,0.376-0.139,0.517,0.005c0.141,0.144,0.139,0.375-0.006,0.516l-4.062,3.968c-0.282,0.282-0.282,0.745,0.003,1.03c0.285,0.284,0.747,0.284,1.032,0l8.074-7.985c0.711-0.71,0.711-1.868-0.002-2.579c-0.711-0.712-1.867-0.712-2.58,0l-8.074,7.984c-1.137,1.137-1.137,2.988,0.001,4.127c1.14,1.14,2.989,1.14,4.129,0l6.989-6.896c0.143-0.142,0.375-0.14,0.516,0.003c0.143,0.143,0.141,0.374-0.002,0.516l-6.988,6.895C8.054,17.836,5.743,17.836,4.317,16.411"></path> </svg>`; export const MENU_ICON = `<svg class="svg-icon" viewBox="0 0 20 20"> <path d="M10,1.445c-4.726,0-8.555,3.829-8.555,8.555c0,4.725,3.829,8.555,8.555,8.555c4.725,0,8.555-3.83,8.555-8.555C18.555,5.274,14.725,1.445,10,1.445 M10,17.654c-4.221,0-7.654-3.434-7.654-7.654c0-4.221,3.433-7.654,7.654-7.654c4.222,0,7.654,3.433,7.654,7.654C17.654,14.221,14.222,17.654,10,17.654 M14.39,10c0,0.248-0.203,0.45-0.45,0.45H6.06c-0.248,0-0.45-0.203-0.45-0.45s0.203-0.45,0.45-0.45h7.879C14.187,9.55,14.39,9.752,14.39,10 M14.39,12.702c0,0.247-0.203,0.449-0.45,0.449H6.06c-0.248,0-0.45-0.202-0.45-0.449c0-0.248,0.203-0.451,0.45-0.451h7.879C14.187,12.251,14.39,12.454,14.39,12.702 M14.39,7.298c0,0.248-0.203,0.45-0.45,0.45H6.06c-0.248,0-0.45-0.203-0.45-0.45s0.203-0.45,0.45-0.45h7.879C14.187,6.848,14.39,7.051,14.39,7.298"></path> </svg>`;
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <app-user></app-user> ` }) export class AppComponent { }
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { HttpClientModule } from '@angular/common/http'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { AppComponent } from './app.component'; import { ExampleComponent } from './example.component'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, HttpClientModule, MatButtonModule, MatIconModule ], declarations: [ AppComponent, ExampleComponent ], 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.

References
Angular Material buttonAngular Material icon