Video Tutorials

Policy

Twitter LogoFacebook Logo
Angular Material UI: Buttons
Hello, in this tutorial, I will be talking about the Button Component from Angular Material.
By: King Wai Mark

Hello, in this tutorial, I will be talking about the Button Component from Angular Material.


The Angular Material UI comes with a wide variety of buttons we can add to our project.

We can choose between Basic, Raised, Flat, Stroked,  Icon, FAB, or mini FAB.

Image from Codeible.com

To begin, add the MatButtonModule to your project. Go to the app module typescript file, add the import statement and add it to the app.

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...,
    MatButtonModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Go to a html page and add a button element.

<button>Default Button</button>

If you want to use the basic type button, add the mat-button attribute to the button. This will apply the styles and effects for the basic button.

<button mat-button>Default Button</button>

For raised, use mat-raised-button.
For flat, use the mat-flat-button 
And for stroked, use the mat-stroked-button.

<button mat-button>Default Button</button>

<button mat-raised-button>Raised Button</button>
<button mat-flat-button>Flat Button</button>
<button mat-stroked-button>Stroked Button</button>

To change the default color of the buttons, apply the color attribute and set it to either primary, accent, or warn. This will allow us to set the buttons with the predefined color based on our theme. 

<button mat-button color="primary">Default Button</button>

<button mat-raised-button color="accent">Raised Button</button>
<button mat-flat-button color="warn">Flat Button</button>
<button mat-stroked-button>Stroked Button</button>

We can also use  our own styles if we choose to.

<button mat-button

  style="background-color: orange"
>Default Button</button>

For the buttons with icons, such as the icon, fab, and mini-fab buttons, we use the same concept. We start with a button element and then we apply a certain angular material button attribute to it.

For the icon button, we use mat-icon-button. 

<button mat-icon-button></button>

Then in between the button element tags, we put an icon.


In this tutorial, we will be using the material design icon library for our icons. The library comes with hundreds of high-quality icons that we can use for our application. 

For the full list of icons, visit the material design icon website.

https://material.io/resources/icons/

To begin using the icons from the library, add the MatIconModule to the project. Go back to the app module typescript file, add the import, and then add it to the app.

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

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

Go back to the buttons and add a mat-icon element inside the button.

<button mat-icon-button>

   <mat-icon></mat-icon>
</button>

Then choose an icon from the material design icon website and place the icon name inside the mat-icon element.

<button mat-icon-button>

   <mat-icon>backup</mat-icon>
</button>

For the fab button, use the mat-fab, and for mini fabs, use mat-mini-fab.

<button mat-fab>

   <mat-icon>backup</mat-icon>
</button>

<button mat-mini-fab>
   <mat-icon>backup</mat-icon>
</button>

Lastly, as best practice for accessibility, we should give our icon buttons a label using the aria-label or aria-labelledby attribute.

<button mat-fab aria-label="iconButton">

   <mat-icon>backup</mat-icon>
</button>


Sign In