Angular Material and CDK

This is the component-library layer: @angular/material (the Material 3 components) sitting on top of @angular/cdk (the unstyled behavior primitives). The framework itself - signals, change detection, standalone components, the testing setup - belongs to angular-conventions, and the language to typescript; load both alongside this. The general CSS/styling layer that holds Material or not - ViewEncapsulation, :host, the ::ng-deep ways out, the app's own design tokens, responsive strategy - is angular-styling; this skill owns only the Material-specific mat.theme and --mat-sys-* token work.

Floor is @angular/material 17+ - standalone components are the default there. The single-mixin M3 theming API this skill teaches (mat.theme, the --mat-sys-* system tokens, the mat.<component>-overrides mixins) landed in v19; v17-v18 used the experimental mat.define-theme predecessor, so upgrade to v19+ to apply the theming section as written. Later additions are flagged optional below.

Import what you use, nothing more

Each Material component ships as its own NgModule. Import them directly into the standalone component that renders them:

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