So far, our app has only consisted of a simple button, which we declared in the following way:

<button mat-button>simple button</button>

There are, however, a lot more button types, namely:

• mat-button, this is a normal looking button
• mat-raised-button, this is a raised button that is displayed with a shadow, to indicate its raised state
• mat-icon-button, this button is meant to be used with an icon
• mat-fab, this is a rounded button
• mat-button-toggle, this is a button that indicates if it has been pressed or not, having pressed/not pressed as states

The markup for the buttons is as follows:

<button mat-button>Normal button</button>
<button mat-raised-button>Raised button</button>
<button mat-fab>Fab button</button>
<button mat-icon-button>
   <mat-icon class="mat-icon material-icons" role="img" 
    aria-hidden="true">home</mat-icon>
   Icon button
</button>
<mat-button-toggle>Button toggle</mat-button-toggle>

It's worth noting that we need to import the MatButtonToggleModule to be able to use the mat-button-toggle button. The buttons look like the following:

To use these buttons, we need to make sure we import and register the modules they belong to. Let's update our root module to look like the following:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { 
  MatButtonModule, 
  MatIconModule, 
  MatButtonToggleModule 
} from '@angular/material';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatIconModule,
    MatButtonToggleModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

We can see that we need to register MatIconModule to support the use of the mat-icon directive,  and we also need to register the MatButtonToggleModule to use the <mat-button-toggle> UI element, a toggle button.