Customizing Components

Material components can be customized with CSS and theming.

Example: Custom button style.

TypeScript

import { Component } from "@angular/core";
import { MatButtonModule } from "@angular/material/button";

@Component({
  selector: "app-custom-button",
  standalone: true,
  imports: [MatButtonModule],
  templateUrl: "./custom-button.component.html",
  styleUrls: ["./custom-button.component.css"],
})
export class CustomButtonComponent {}

HTML

<button mat-raised-button class="custom-button">Custom Styled Button</button>

CSS

.custom-button {
  background-color: purple;
  color: white;
}

Explanation

Material components are fully customizable using CSS or SCSS themes.