Skip to main content

​
Prerequisites

Before installing Angular Material, make sure you have:
1

Node.js and npm

Install Node.js (which includes npm). Angular requires a current, active LTS, or maintenance LTS version of Node.js.
2

Angular CLI

Install the Angular CLI globally:
npm install -g @angular/cli
3

Angular Project

Create a new Angular project or use an existing one:
ng new my-app
cd my-app
The easiest way to install Angular Material is using the Angular CLI’s ng add command: 
g add @angular/material

​
What ng add Does

The ng add command will:
  • Adds @angular/material to package.json
  • Adds @angular/cdk (Component Dev Kit) to package.json
  • Adds @angular/animations to package.json
You’ll be prompted to choose a prebuilt theme or set up a custom theme:
  • Azure Blue - Indigo & Pink
  • Rose Red - Pink & Indigo
  • Magenta Violet - Purple & Green
  • Cyan Orange - Deep Orange & Amber
  • Custom - Set up an extensible custom theme
The selected theme will be added to your angular.json or a custom theme file will be created.
You’ll be asked whether to apply global Angular Material typography styles:
  • Yes - Applies Material Design typography across your entire application
  • No - You can manually configure typography later
  • Adds Roboto font to your index.html
  • Adds Material Design icon font to your index.html
Adds global CSS to styles.css or styles.scss:
  • Removes margins from body
  • Sets height: 100% on html and body
  • Sets Roboto as the default application font
The ng add command is the recommended way to install Angular Material as it handles all the configuration automatically.

​
Manual Installation

If you prefer to install and configure Angular Material manually, follow these steps:
1

Install npm Packages

Install the required packages using npm:
npm install @angular/material @angular/cdk @angular/animations
2

Configure Animations

Add the BrowserAnimationsModule to your application. Import it in your app configuration:
app.config.ts
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimations(),
    // other providers...
  ]
};
Or if you’re using NgModules:
app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    // other imports...
  ],
})
export class AppModule { }
If you don’t want animations, you can use NoopAnimationsModule instead.
3

Include a Theme

Including a theme is required to apply Material Design styles to your components.Add one of the prebuilt themes to your angular.json:
angular.json
"styles": [
  "@angular/material/prebuilt-themes/azure-blue.css",
  "src/styles.css"
],
Available prebuilt themes:
  • azure-blue.css
  • rose-red.css
  • magenta-violet.css
  • cyan-orange.css
Or create a custom theme file (see Theming Guide).
4

Add Material Icons

Add the Material Design icon font to your index.html:
index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
5

Add Roboto Font (Optional)

Add the Roboto font to your index.html:
index.html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
6

Configure Global Styles (Optional)

Add these styles to your global styles.css or styles.scss:
styles.css
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

​
Installing Other Packages

​
Angular CDK Only

If you only need the Component Dev Kit (CDK) without Material components: 
ng add @angular/cdk
Or manually: 
npm install @angular/cdk

​
Google Maps Component

To use the Google Maps component: 
ng add @angular/google-maps
You’ll also need to:
  1. Get a Google Maps API key
  2. Load the Google Maps JavaScript API in your index.html
See the Google Maps documentation for more details.

​
YouTube Player Component

To use the YouTube Player component: 
ng add @angular/youtube-player
The YouTube iframe API will be loaded automatically when needed. See the YouTube Player documentation for more details.

​
Verify Installation

After installation, verify that everything is working by importing and using a component:
app.component.ts
import { Component } from '@angular/core';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

@Component({
  selector: 'app-root',
  imports: [MatSlideToggleModule],
  template: '<mat-slide-toggle>Toggle me!</mat-slide-toggle>',
})
export class AppComponent {}

npm start
Visit http://localhost:4200 and you should see a Material slide toggle component.

​
Next Steps

Quick Start

Build your first Material application

Theming

Customize your component appearance

Schematics

Generate components with Angular CLI

Components

Explore available components

​
Troubleshooting

Make sure you’ve included a theme. Check that your angular.json includes a prebuilt theme or that your custom theme is being loaded.
Verify that BrowserAnimationsModule or provideAnimations() is included in your application configuration.
Check that the Material Icons font is loaded in your index.html. You can also use SVG icons with MatIconModule.
Ensure the Roboto font is loaded in your index.html and the global styles are configured correctly.

Build docs developers (and LLMs) love

Get started for freeTalk to us