Install Angular Material in an Angular project

Updated November 2026: rewritten for Angular 22 and Angular Material 22: standalone components instead of app.module.ts, the new welcome page, the Material 3 theme ng add writes for you, and the new matButton API.

Angular Material is the official library of UI components for Angular, based on the Material Design 3 specification.

In this article, we install Angular Material in an Angular 22 project and display our first Material component.

Prerequisites

• Node.js: Angular 22 requires an active or maintenance LTS version: ^22.22.3, ^24.15.0 or ^26.0.0 (see Version compatibility).
• Angular CLI: npm install -g @angular/cli.
• An editor. I use Visual Studio Code.

Create an Angular project

Create a new project with the Angular CLI:

ng new angular-app-with-angular-material

The CLI asks a few questions. I chose Sass for the stylesheets, no server-side rendering and no AI tool configuration:

√ Which stylesheet system would you like to use? Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
√ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
√ Which AI tools should Angular integrate with? https://angular.dev/ai/develop-with-ai None

Note: The first time you run the CLI, it also asks whether to share pseudonymous usage data with the Angular team. The answer has no effect on the project.

Then open the project:

cd angular-app-with-angular-material
code .

You should have the following structure:

angular-app-with-angular-material/
├── public/
│   └── favicon.ico
├── src/
│   ├── app/
│   │   ├── app.config.ts
│   │   ├── app.html
│   │   ├── app.routes.ts
│   │   ├── app.scss
│   │   ├── app.spec.ts
│   │   └── app.ts
│   ├── index.html
│   ├── main.ts
│   └── styles.scss
├── angular.json
├── package.json
└── ...

There is no app.module.ts: since Angular 19, components are standalone by default. The root component App lives in app.ts, and each component declares what it uses in its own imports array.

Run the application

The Angular CLI includes a development server. Start it with:

ng serve --open

The --open option opens your browser on http://localhost:4200/, where you should see the welcome page:

Install Angular Material

Add Angular Material with ng add:

ng add @angular/material

This installs Angular Material and the Component Dev Kit (CDK). It no longer installs @angular/animations: Angular Material 22 does not depend on it, so there is no provideAnimations() to add either.

The CLI asks you to confirm the installation, then to choose the colour palettes of your theme:

The package @angular/material@^22.2.6 will be installed and executed.
Would you like to proceed? Yes
✔ Confirming installation
✔ Installing package
? Select a pair of starter prebuilt color palettes for your Angular Material theme
> Azure/Blue         [Preview: https://material.angular.dev?theme=azure-blue]
  Rose/Red           [Preview: https://material.angular.dev?theme=rose-red]
  Magenta/Violet     [Preview: https://material.angular.dev?theme=magenta-violet]
  Cyan/Orange        [Preview: https://material.angular.dev?theme=cyan-orange]

I kept Azure/Blue. The schematic then updates three files:

UPDATE package.json (875 bytes)
✔ Packages installed successfully.
UPDATE src/styles.scss (1259 bytes)
UPDATE src/index.html (695 bytes)

index.html now loads the Roboto font and the Material Symbols icon font. styles.scss defines a Material 3 theme with the mat.theme mixin (the generated comments are removed here):

@use '@angular/material' as mat;

html {
  height: 100%;
  @include mat.theme(
    (
      color: (
        primary: mat.$azure-palette,
        tertiary: mat.$blue-palette,
      ),
      typography: Roboto,
      density: 0,
    )
  );
}

body {
  color-scheme: light;
  background-color: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
  font: var(--mat-sys-body-medium);
  margin: 0;
  height: 100%;
}

The mixin turns the palettes into system variables (--mat-sys-primary, --mat-sys-surface…). Every Material component reads them, and you can use them in your own styles too.

Note: color-scheme: light forces the light theme. Set it to light dark and the theme follows the user's system settings, dark mode included, without a second theme.

Display a component

Let's add a Material button to the welcome page. With Material 3, a button picks its appearance with the matButton attribute:

<button matButton>Text</button>
<button matButton="elevated">Elevated</button>
<button matButton="filled">Filled</button>
<button matButton="tonal">Tonal</button>
<button matButton="outlined">Outlined</button>

We use the filled button, which takes the primary colour of the theme.

Note: The older mat-raised-button, mat-flat-button and mat-stroked-button attributes still work, but matButton="elevated", matButton="filled" and matButton="outlined" are the current API. With a Material 3 theme, the colour comes from the theme, not from a color="primary" input.

Import the MatButton and MatIcon directives in the imports of the component that uses them, src/app/app.ts:

import { Component, signal } from '@angular/core';
import { MatButton } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';
import { RouterOutlet } from '@angular/router';

@Component({
  imports: [RouterOutlet, MatButton, MatIcon],
  selector: 'app-root',
  styleUrl: './app.scss',
  templateUrl: './app.html',
})
export class App {
  protected readonly title = signal('angular-app-with-angular-material');
}

In src/app/app.html, add the button below the "Congratulations" paragraph:

<button matButton="filled" class="new-component">
  <mat-icon>add</mat-icon>
  New component
</button>

Then give it some space in src/app/app.scss:

.new-component {
  margin-top: 1.5rem;
}

Note: <mat-icon> uses the Material Symbols font that ng add added to index.html, so add renders as a "+" icon without any configuration. It also sets aria-hidden="true" by default, so a screen reader announces only the button's text.

If the server is no longer running, start it again with ng serve --open. The welcome page now shows the Material filled button:

The "New component" button has the Angular Material style, and the page background now comes from the theme too.

Conclusion

In this article, we installed Angular Material in an Angular 22 project with a single ng add command, looked at the Material 3 theme it generates and displayed a Material button.

To go further, the component documentation has many examples, and the theming guide explains everything mat.theme can do.

Source code of the article: GitHub source code

References

• Angular Material: Getting started — installing Angular Material with ng add.
• Angular Material: Theming — the mat.theme mixin, palettes, typography and density.
• Angular Material: System variables — the --mat-sys-* CSS variables.
• Angular Material: Button — the matButton appearances.
• Angular Material: Icon — <mat-icon>, font icons and accessibility.
• Angular: Version compatibility — the Node.js versions each Angular version supports.
• Angular: Importing and using components — standalone components and their imports.
• Angular CLI: ng add — what ng add does.
• Material Design 3 — the design system Angular Material implements.
• MDN: color-scheme — light and dark colour schemes.