Mat Button Customize ByDefault Theme in Angular 15

Download Code

ByDefault Theme Color

• Mat-Buttons with the current theme, you have the option to apply color using the color property. This allows you to set the background color of buttons to primary, accent, or warn, based on your preference.

import the Angular Material Button Module File

app.module.ts

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

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

ByDefault Mat Basic Button

app.component.html

<!----------- Primary Theme ------------>

<button mat-button color="primary" > Primary Theme </button>

<!----------- Accent Theme ------------->

<button mat-button color="accent" > Accent Theme </button>

<!----------- Warn Theme --------------->

<button mat-button color="warn" > Warn Theme </button>

app.component.scss

// Primary Theme Change css

.mat-mdc-button.mat-mdc-button-base, .mat-mdc-raised-button.mat-mdc-button-base, .mat-mdc-outlined-button.mat-mdc-button-base {

height: 45px !important; // change button height

width: 90px !important; // change button width

-moz-osx-font-smoothing: grayscale; // for font-smooth

-webkit-font-smoothing: antialiased; // for font-smooth

font-family: Arial, Helvetica, sans-serif // change button font family

font-size: var(--mdc-typography-button-font-size, 17px); // change button font size

line-height: var(--mdc-typography-button-line-height, 36px); // change button font line-height

font-weight: var(--mdc-typography-button-font-weight, 400); // change button font-weight

letter-spacing: var(--mdc-typography-button-letter-spacing, 0.7px); // change button font-weight

}

// Primary Theme Change css

.mat-mdc-button.mat-primary {

--mdc-text-button-label-text-color: #0f8bff !important; // change button background color

--mat-mdc-button-ripple-color: rgba(255, 209, 83, 0.4) !important; // change button font color

--mat-mdc-button-persistent-ripple-color: #0f8bff !important; // click to change button ripple color

}

.mat-mdc-button.mat-primary:hover {

background-color: rgba(255, 209, 83, 0.1);

}

// Accent Theme Change css

.mat-mdc-button.mat-accent {

--mdc-text-button-label-text-color: #ff6497!important;

--mat-mdc-button-ripple-color: rgba(255, 100, 151, 0.4) !important;

--mat-mdc-button-persistent-ripple-color: #ff6497 !important;

}

.mat-mdc-button.mat-accent:hover {

background-color: rgba(255, 209, 83, 0.1);

}

// Warn Theme Change css

.mat-mdc-button.mat-warn {

--mdc-text-button-label-text-color: #ff7b71 !important;

--mat-mdc-button-ripple-color: rgba(255, 123, 113, 0.4) !important;

--mat-mdc-button-persistent-ripple-color: #ff7b71 !important;

}

.mat-mdc-button.mat-warn:hover {

background-color: rgba(255, 123, 113, 0.08);

}

.mat-mdc-button {

margin: 0 5px; // change margin between two buttons

}

ByDefault Mat Raised Button

app.component.html

<!----------- Primary Theme ------------>

<button mat-raised-button color="primary" > Primary Theme </button>

<!----------- Accent Theme ------------->

<button mat-raised-button color="accent" > Accent Theme </button>

<!----------- Warn Theme --------------->

<button mat-raised-button color="warn" > Warn Theme </button>

app.component.scss

// Primary Theme Change css

.mat-mdc-button.mat-mdc-button-base, .mat-mdc-raised-button.mat-mdc-button-base, .mat-mdc-outlined-button.mat-mdc-button-base {

height: 45px !important; // change button height

width: 90px !important; // change button width

-moz-osx-font-smoothing: grayscale; // for font-smooth

-webkit-font-smoothing: antialiased; // for font-smooth

font-family: Arial, Helvetica, sans-serif // change button font family

font-size: var(--mdc-typography-button-font-size, 17px); // change button font size

line-height: var(--mdc-typography-button-line-height, 36px); // change button font line-height

font-weight: var(--mdc-typography-button-font-weight, 400); // change button font-weight

letter-spacing: var(--mdc-typography-button-letter-spacing, 0.7px); // change button font-weight

}

// Primary Theme Change css

.mat-mdc-raised-button.mat-primary {

--mdc-protected-button-container-color: #0f8bff !important // change button background color

--mdc-protected-button-label-text-color: #fff !important; // change button font color

--mat-mdc-button-ripple-color: rgba(255, 0, 0, 0.4) !important; // click to change button ripple color

}

.mat-mdc-button.mat-primary:hover {

--mdc-protected-button-container-color: #005baf !important; // hover to change button background color

--mdc-protected-button-label-text-color: #fff !important; // hover to change button font color

}

// Accent Theme Change css

mat-mdc-raised-button.mat-accent {

--mdc-protected-button-container-color: #ff2d73; // change button background color

--mdc-protected-button-label-text-color: #fff; // change button font color

--mat-mdc-button-ripple-color: rgba(255, 187, 0, 0.6) !important; // click to change button ripple color

}

.mat-mdc-button.mat-accent :hover {

--mdc-protected-button-container-color: #d10046 !important; // hover to change button background color

--mdc-protected-button-label-text-color: #fff !important; // hover to change button font color

}

// Warn Theme Change css

mat-mdc-raised-button.mat-warn {

--mdc-protected-button-container-color: #ff261e; // change button background color

--mdc-protected-button-label-text-color: #fff; // change button font color

--mat-mdc-button-ripple-color: rgba(0, 204, 17, 0.6) !important; // click to change button ripple color

}

.mat-mdc-button.mat-warn :hover {

--mdc-protected-button-container-color: #d40700 !important; // hover to change button background color

--mdc-protected-button-label-text-color: #fff !important; // hover to change button font color

}

mat-mdc-raised-button {

margin: 0 5px; // change margin between two buttons

border-radius: none !important; // remove border-radius in button

}

ByDefault Mat Stroked Button

app.component.html

<!----------- Primary Theme ------------>

<button mat-stroked-button color="primary" > Primary Theme </button>

<!----------- Accent Theme ------------->

<button mat-stroked-button color="accent" > Accent Theme </button>

<!----------- Warn Theme --------------->

<button mat-stroked-button color="warn" > Warn Theme </button>

app.component.scss

// Primary Theme Change css

.mat-mdc-button.mat-mdc-button-base, .mat-mdc-raised-button.mat-mdc-button-base, .mat-mdc-outlined-button.mat-mdc-button-base {

height: 45px !important; // change button height

width: 90px !important; // change button width

-moz-osx-font-smoothing: grayscale; // for font-smooth

-webkit-font-smoothing: antialiased; // for font-smooth

font-family: Arial, Helvetica, sans-serif // change button font family

font-size: var(--mdc-typography-button-font-size, 17px); // change button font size

line-height: var(--mdc-typography-button-line-height, 36px); // change button font line-height

font-weight: var(--mdc-typography-button-font-weight, 400); // change button font-weight

letter-spacing: var(--mdc-typography-button-letter-spacing, 0.7px); // change button font-weight

}

// Primary Theme Change css

.mat-mdc-outlined-button.mat-primary {

--mdc-outlined-button-label-text-color: #0f8bff !important; // change button font color

--mat-mdc-button-ripple-color: rgba(15, 139, 255, 0.8) !important; // change button ripple color

--mat-mdc-button-persistent-ripple-color: #000 !important; // change button persistent ripple color

--mdc-outlined-button-outline-color: #0f8bff !important; // change button outline color

}

.mat-mdc-outlined-button.mat-primary:active {

--mdc-outlined-button-label-text-color: #fff !important; // click to change button font color

}

// Accent Theme Change css

.mat-mdc-outlined-button.mat-accent {

--mdc-outlined-button-label-text-color: #ff4081 !important; // change button font color

--mat-mdc-button-ripple-color: rgba(255, 64, 129, 0.8) !important // change button ripple color

--mat-mdc-button-persistent-ripple-color: #000 !important; // change button persistent ripple color

--mdc-outlined-button-outline-color: #0f8bff !important; // change button outline color

}

.mat-mdc-outlined-button.mat-accent:active {

--mdc-outlined-button-label-text-color: #fff !important; // click to change button font color

}

// Warn Theme Change css

.mat-mdc-outlined-button.mat-warn {

--mdc-outlined-button-label-text-color: #f44336 !important; // change button font color

--mat-mdc-button-ripple-color: rgba(244, 67, 54, 0.8) !important; // change button ripple color

--mat-mdc-button-persistent-ripple-color: #000 !important; // change button persistent ripple color

--mdc-outlined-button-outline-color: #f44336 !important; // change button outline color

}

.mat-mdc-outlined-button.mat-warn:active {

--mdc-outlined-button-label-text-color: #fff !important; // click to change button font color

}

.mat-mdc-outlined-button {

margin: 0 5px; // change margin between two buttons

}

ByDefault Mat Flat Button

app.component.html

<!----------- Primary Theme ------------>

<button mat-flat-button color="primary" > Primary Theme </button>

<!----------- Accent Theme ------------->

<button mat-flat-button color="accent" > Accent Theme </button>

<!----------- Warn Theme --------------->

<button mat-flat-button color="warn" > Warn Theme </button>

app.component.scss

// Primary Theme Change css

mat-mdc-unelevated-button.mat-primary {

--mdc-filled-button-container-color: #0f8bff !important; // change button background color

--mdc-filled-button-label-text-color: #fff; // change button font color

}

// Accent Theme Change css

mat-mdc-unelevated-button.mat-accent {

--mdc-filled-button-container-color: #ff2d73 !important; // change button background color

--mdc-filled-button-label-text-color: #fff; // change button font color

}

// Warn Theme Change css

mat-mdc-unelevated-button.mat-warn {

--mdc-filled-button-container-color: #ff261e !important; // change button background color

--mdc-filled-button-label-text-color: #fff; // change button font color

}

// button opacity fill when keyboard tab key use

::ng-deep .mat-mdc-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before, ::ng-deep .mat-mdc-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before, ::ng-deep .mat-mdc-outlined-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before, ::ng-deep .mat-mdc-outlined-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before {

opacity: 0.5; // change button persistent ripple opacity

}

ByDefault Mat Icon Button

app.component.html

<!----------- Primary Theme ------------>

<button mat-icon-button color="primary">
    <mat-icon> home </mat-icon>
</button>

<!----------- Accent Theme ------------->

<button mat-icon-button color="accent">
    <mat-icon> bookmark </mat-icon>
</button>

<!----------- Warn Theme --------------->

<button mat-icon-button color="warn">
    <mat-icon> favorite </mat-icon>
</button>

app.component.scss

// Icon Button

.mat-icon {

height: 40px !important; // change button height

width: 40px !important; // change button width

overflow: auto !important; // for button overflow

font-size: var(--mdc-typography-button-font-size, 40px); // change button font size

}

// Primary Theme Change css

.mat-mdc-icon-button.mat-primary {

--mdc-icon-button-icon-color: #0f8bff !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #0f8bff !important; // change button ripple color

--mat-mdc-button-ripple-color: rgba(15, 139, 255, 0.1) !important; // change button persistent ripple color

}

// Accent Theme Change css

.mat-mdc-icon-button.mat-accent {

--mdc-icon-button-icon-color: #ff2d73 !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #ff2d73 !important; // change button ripple color

--mat-mdc-button-ripple-color: rgba(255, 45, 115, 0.1) !important; // change button persistent ripple color

}

// Warn Theme Change css

.mat-mdc-icon-button.mat-warn {

--mdc-icon-button-icon-color: #ff261e !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #ff261e !important; // change button ripple color

--mat-mdc-button-ripple-color: rgba(255, 38, 30, 0.1) !important; // change button persistent ripple color

}

.mat-mdc-icon-button.mat-mdc-button-base {

width: 50px !important; // change button base width

height: 50px !important; // change button base height

padding: 10px 7px !important; // change button base padding

}

.mat-mdc-icon-button {

margin: 0 5px; // change margin between two buttons

}

ByDefault Mat FAB Button

app.component.html

<!----------- Primary Theme ------------>

<button mat-fab color="primary">class="matFab1">
    <mat-icon> home </mat-icon>
</button>

<!----------- Accent Theme ------------->

<button mat-fab color="accent">class="matFab2">
    <mat-icon> bookmark </mat-icon>
</button>

<!----------- Warn Theme --------------->

<button mat-fab color="warn">class="matFab3">
    <mat-icon> favorite </mat-icon>
</button>

app.component.scss

// Primary Theme Change css

.matFab1 .mat-icon {

height: 25px !important; // change button height

width: 25px !important; // change button width

overflow: auto !important; // for button overflow

font-size: var(--mdc-typography-button-font-size, 25px); // change button font size

}

.mat-mdc-fab.mat-primary {

--mdc-fab-container-color: #0f8bff !important; // change button background color

--mat-mdc-fab-color: #ffd000 !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #fff !important; // change button persistent ripple color

--mat-mdc-button-ripple-color: rgba(255, 255, 255, 0.1) !important; // change button ripple color

padding: 10px 8px !important; // change button padding

}

// Accent Theme Change css

.matFab2 .mat-icon {

height: 25px !important; // change button height

width: 25px !important; // change button width

overflow: auto !important; // for button overflow

font-size: var(--mdc-typography-button-font-size, 30px); // change button font size

}

.mat-mdc-fab.mat-accent {

--mdc-fab-container-color: #ff4081 !important; // change button background color

--mat-mdc-fab-color: #ffd000 !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #fff !important; // change button persistent ripple color

--mat-mdc-button-ripple-color: rgba(255, 255, 255, 0.1) !important; // change button ripple color

padding: 10px 8px !important; // change button padding

}

// Warn Theme Change css

.matFab3 .mat-icon {

height: 35px !important; // change button height

width: 35px !important; // change button width

overflow: auto !important; // for button overflow

font-size: var(--mdc-typography-button-font-size, 35px); // change button font size

}

.mat-mdc-fab.mat-warn{

--mdc-fab-container-color: #f44336 !important; // change button background color

--mat-mdc-fab-color: #ffd000 !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #fff !important; // change button persistent ripple color

--mat-mdc-button-ripple-color: rgba(255, 255, 255, 0.1) !important; // change button ripple color

padding: 10px 8px !important; // change button padding

}

.mat-mdc-fab {

margin: 0 5px; // change margin between two buttons

}

ByDefault Mat Mini-FAB Button

app.component.html

<!----------- Primary Theme ------------>

<button mat-mini-fab color="primary">class="matMiniFab1">
    <mat-icon> bookmark </mat-icon>
</button>

<!----------- Accent Theme ------------->

<button mat-mini-fab color="accent">class="matMiniFab2">
    <mat-icon> favorite </mat-icon>
</button>

<!----------- Warn Theme --------------->

<button mat-mini-fab color="warn">class="matMiniFab3">
    <mat-icon> delete </mat-icon>
</button>

app.component.scss

// Primary Theme Change css

.matMiniFab1 .mat-icon {

height: 20px !important; // change button height

width: 20px !important; // change button width

overflow: auto !important; // for button overflow

font-size: var(--mdc-typography-button-font-size, 20px); // change button font size

}

.mat-mdc-mini-fab.mat-primary {

--mdc-fab-container-color: #0f8bff !important; // change button background color

--mat-mdc-fab-color: #ffd000 !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #fff !important; // change button persistent ripple color

--mat-mdc-button-ripple-color: rgba(255, 255, 255, 0.1) !important; // change button ripple color

padding: 10px 8px !important; // change button padding

}

// Accent Theme Change css

.matMiniFab2 .mat-icon {

height: 25px !important; // change button height

width: 25px !important; // change button width

overflow: auto !important; // for button overflow

font-size: var(--mdc-typography-button-font-size, 25px); // change button font size

}

.mat-mdc-mini-fab.mat-accent {

--mdc-fab-container-color: #ff4081 !important; // change button background color

--mat-mdc-fab-color: #ffd000 !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #fff !important; // change button persistent ripple color

--mat-mdc-button-ripple-color: rgba(255, 255, 255, 0.1) !important; // change button ripple color

padding: 10px 8px !important; // change button padding

}

// Warn Theme Change css

.matMiniFab3 .mat-icon {

height: 30px !important; // change button height

width: 30px !important; // change button width

overflow: auto !important; // for button overflow

font-size: var(--mdc-typography-button-font-size, 30px); // change button font size

}

.mat-mdc-mini-fab.mat-warn{

--mdc-fab-container-color: #f44336 !important; // change button background color

--mat-mdc-fab-color: #ffd000 !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #fff !important; // change button persistent ripple color

--mat-mdc-button-ripple-color: rgba(255, 255, 255, 0.1) !important; // change button ripple color

padding: 10px 8px !important; // change button padding

}

.mat-mdc-icon-button {

margin: 0 5px; // change margin between two buttons

}