EDUCBA

Home Software Development Software Development Tutorials Angular Tutorial Angular material button with icon

Angular material button with icon

Updated March 31, 2023

Angular-material-button-with-icon

Introduction to Angular material button with icon

In angular, we can create a button; it is very easy with the help of material API, it is pretty much easy. We can make use of the button library present inside the material in the same way we used to create the simple button. WE can attach our icon tag inside the button tag to make this work. We can insert any type of icon to the button just by changing the icon name; also, the icon library should be present in the index file; otherwise, it will not load the icon to UI. These buttons come up with the default styling and animation, making the UI more user-friendly and interactive. In the coming section, we will see how we can use buttons and icons together in our application provided by the material library for beginners to understand it more better.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Syntax

As we already know, in this article, we will see the usage of icons and buttons together.

Let’s have a closer look at the syntax to get a better understanding of the code.

<button mat-icon-button aria-label="your label">
<mat-icon>our icon here ..</mat-icon>
</button>

As you can see in the above code, we are trying to make use of both icon and button here with the icon we want to use while certain the button. In the coming section of the tutorial, we will have a closer

look at the practice example for more clarity.

How to create a button with the icon in Angular material?

To create the button and attach an icon with them, we can make use of both button and icon from the material library. It already has a build module that can be used directly to create the button with an icon. In this section, we will see how we can create them by following the below simple steps, so let’s get started to see below;

1) MatButtonModule: we need to have this module import or present inside the root module or any of the child modules in which we want to use this; with the help of this, we will be able to make use of the button provided by the material library. For reference, see the below code and paste inside the module.ts file see below;

e.g. :

import {MatButtonModule} from '@angular/material/button';

2) we have several button variants which are provided by material see below;

  1. a) mat-raised-button
  2. b) mat-button
  3. c) mat-fab
  4. d) mat-mini-fab
  5. e) mat-flat-button
  6. f) mat-icon-button
  7. g) mat-stroked-button

3) To make use of the icon, we need to have the below configuration in place see below;

4) MatIconModule: this module needs to be present inside the root module of the child module in which we want to use this. After this, only we will be able to use the mat icon from the material library without error; otherwise, it will generate the error. For reference, follow the below code and paste inside the modult.ts file see below;

e.g. :

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

5) mat-icon: this selector can be used to show our icon to the UI with the proper name.

Now we will be going to follow the steps to create the angular application from scratch with material installed in it; follow for reference to make this work.

  • We can install the angular cli by using the below command; for globally, we are using -g here.

e.g. :

npm install -g @angular/cli)

3) Once we are done with the CLI installation, we can use it to create our angular project. Follow the below command and give some name to your project and run it,

syntax:

ng new your project name

e.g. :

ng new my-first-project

go to the directory where you have created it in order to see the changes.

4) Let’s do the npm install now to install all the required dependencies, it is an optional step, but we should follow it;

e.g. :

npm install

5) Now, we can start our application once the dependency gets installed properly. Follow the below command to see the changes;

e.g. :

ng serve

6) We can see the changes on the local URL we have; by default, it runs on 4200 port; execute the below command on the browser to see the changes

e.g. :

http://localhps:4200

7) Now, we have to install the material library in order to make use of all the modules or components it provides; execute the below command see below;

e.g. :

ng add @angular/material

we are ready to do some hands-on using the material library in angular; let’s take a look at the practice example we have better clarity.

Example of Angular material button with icon

Different examples are mentioned below:

1) index.html code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
<title> buttons icon</title>
</head>
<body class="mat-app-background">
<button-demo>Loading...</button-demo>
<span class="version-info">Current build: 12.1.1</span>
</body>
</html>

2) module.ts code :

import {NgModule} from '@angular/core';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
@NgModule({
exports: [
MatButtonModule,
MatIconModule,
]
})
export class DemoButtonIconModule {}

3) demo.button-icon.component.ts code :

import {Component} from '@angular/core';
/**
* @title  buttons icon
*/
@Component({
selector: 'button-icon',
templateUrl: 'demo.button-icon.component.html',
styleUrls: ['demo.button-icon.component.css'],
})
export class IconButtonComponent {}

4) demo.button-icon.component.html code :

<mat-divider></mat-divider>
<h5><u><i> Button with Icon using Angular material!! </i></u></h5>
<section>
<h5>Icon(Simple) button icon in angular material</h5>
<div >
<div >
<button mat-icon-button>
<mat-icon>face</mat-icon>
</button>
<button mat-icon-button color="primary" >
<mat-icon>home</mat-icon>
</button>
<button mat-icon-button color="accent" >
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button color="warn" >
<mat-icon>thumb_up</mat-icon>
</button>
<button mat-icon-button >
<mat-icon>savings</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>flutter_dash</mat-icon>
</button>
</div>
</div>
</section>
<mat-divider></mat-divider>
<h5>Fab button icon in angular material</h5>
<section>
<div class="example-button-row">
<div class="example-flex-container">
<div >
<button mat-fab color="primary" >
<mat-icon>outlet</mat-icon>
</button>
</div>
<div >
<button mat-fab color="accent" >
<mat-icon>bookmark</mat-icon>
</button>
</div>
<div >
<button mat-fab color="warn" >
<mat-icon>maps_home_work</mat-icon>
</button>
</div>
<div >
<button mat-fab >
<mat-icon>emoji_emotions</mat-icon>
</button>
</div>
<div >
<button mat-fab >
<mat-icon>sentiment_satisfied</mat-icon>
</button>
</div>
<div >
<button mat-fab >
<mat-icon>sentiment_very_satisfied</mat-icon>
</button>
</div>
</div>
</div>
</section>

Output:

Angular material button with icon output

Conclusion

WE can make our button more representable to the user just by adding the icon to it. It makes them more and more user-friendly and under stable as well. All the required packages, modules, and tags are present inside the angular material, which can be directly used without any further modification, making it easier and faster to use.

Recommended Articles

This is a guide to the Angular material button with an icon. Here we discuss How to create a button with the icon in Angular material along with the example and output. You may also have a look at the following articles to learn more –

  1. Angular CLI
  2. Angular Material Icons
  3. Angular 7 Features
  4. AngularJS ng-if
quiz