Angular Material Button with Icon

By Arvind Rai, October 21, 2022
Angular Angular Material
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';
Now find the example to create button with 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>
2. Using mat-fab :
The mat-fab provides circular button with elevation that can contain an icon. 
<button mat-fab>
  <mat-icon>menu</mat-icon>
</button>
3. Using mat-mini-fab :
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 using mat-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>
example.component.ts 
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));
	}
}
svg.icons.ts 
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>`;
app.component.ts 
import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   template: `
		<app-user></app-user>
             `
})
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 { 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.
Angular Material Button with Icon

References

Angular Material button
Angular Material icon

Download Source Code

angular-material-button-with-icon.zip
POSTED BY
ARVIND RAI
ARVIND RAI
Popular Tutorials: Java 8 | Spring 5 | Angular | Android
RELATED POST










©2023 concretepage.com | Privacy Policy | Contact Us