How to integrate Angular Material
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Angular Material provides comprehensive Material Design components with accessibility, internationalization, and theming built-in for professional Angular applications. As the creator of CoreUI, a widely used open-source UI library, I’ve integrated Angular Material in enterprise projects throughout my 11 years of frontend development. The most efficient approach is using Angular CLI’s ng add schematic which automatically configures Material with proper dependencies and setup. This method ensures correct installation, configures theming, adds required animations, and sets up typography for immediate component usage.
Use ng add @angular/material command to automatically install and configure Angular Material with all dependencies.
ng add @angular/material
During installation, you’ll be prompted to choose:
- Prebuilt theme (Indigo/Pink, Deep Purple/Amber, Pink/Blue Grey, Purple/Green, or Custom)
- Typography styles (Yes/No)
- Browser animations (Include and enable/Exclude)
After installation, import required modules in your component or module:
import { Component } from '@angular/core'
import { MatButtonModule } from '@angular/material/button'
import { MatCardModule } from '@angular/material/card'
import { MatInputModule } from '@angular/material/input'
import { MatFormFieldModule } from '@angular/material/form-field'
import { MatIconModule } from '@angular/material/icon'
@Component({
selector: 'app-dashboard',
standalone: true,
imports: [
MatButtonModule,
MatCardModule,
MatInputModule,
MatFormFieldModule,
MatIconModule
],
template: `
<mat-card>
<mat-card-header>
<mat-card-title>Welcome to Angular Material</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-form-field appearance='outline'>
<mat-label>Enter your name</mat-label>
<input matInput placeholder='John Doe'>
<mat-icon matSuffix>person</mat-icon>
</mat-form-field>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color='primary'>Submit</button>
<button mat-button>Cancel</button>
</mat-card-actions>
</mat-card>
`
})
export class DashboardComponent { }
Here the ng add command installs @angular/material, @angular/cdk, and @angular/animations packages automatically. The schematic adds Material theme imports to styles.scss and configures angular.json with Material Design icons font. Each Material component requires importing its specific module for tree-shaking optimization. The standalone: true approach with imports array enables using Material components in standalone Angular components. Material components like mat-card, mat-form-field, and mat-button provide consistent Material Design styling. The matInput directive and matSuffix position enhance native input elements with Material Design patterns.
Best Practice Note:
This is the Material integration we recommend for Angular projects requiring Google’s Material Design specification, though CoreUI for Angular offers more flexibility for custom enterprise designs. Create a shared Material module that exports all commonly used Material modules to avoid repeated imports across components, customize Material themes by defining custom color palettes in your styles.scss, and explore CoreUI for Angular as an alternative when you need more customizable components beyond Material Design constraints for enterprise branding requirements.
