Create an Angular Material button with an icon and text

Here is a step-by-step tutorial on how to create an Angular Material button with an icon and text:

Install Angular Material: Make sure you have installed Angular Material in your project. You can do this by running the following command in your terminal:

npm install @angular/material

Import MatButtonModule: Import the MatButtonModule into your app's module. This will give you access to the Angular Material button components.

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

@NgModule({
  imports: [
    MatButtonModule
  ]
})
export class AppModule { }

Create a button component: Create a new component for your button. This component will contain the HTML for your button, including the icon and text.

import { Component } from

Add the button HTML: Add the following HTML to your button component's template:

<button mat-raised-button>
  <mat-icon>favorite</mat-icon>
  Click me
</button>

This HTML will create a raised button with the "favorite" icon and the text "Click me".

Style the button: You can style the button using CSS. For example, you can change the button's color or font size.

.button {
  background-color: #F44336;
  color: #fff;
  font-size: 18px;
}

This CSS will change the button's background color to red, the text color to white, and the font size to 18px.

Use the button component: You can use the button component in your app's HTML just like any other component.

<app-button></app-button>

This HTML will render the button component in your app.

Here is an example of how to create a button with an icon and text using Angular Material:

<button mat-raised-button>
  <mat-icon>favorite</mat-icon>
  Click me
</button>

This code will create a button with the "favorite" icon and the text "Click me". The button will have a raised style and will be colored red.

Buy our ebook: Angular 17 from Scratch - Build an ecommerce app step by step!