Senior Principal Engineer
@ Secureworks

SoodAnkita

GuacamoleAnkita

Austin, Texas

Ankita Sood

(uh nk - ee t ah s oo d)

ankitasood.bsky.social

WebVibesOnly

Deep Dive into

The Material World

Deep Dive into

Angular Material's

Latest Updates

Material Design

Google’s open-source design system

Material Design

Angular Material

In Angular Material v15, many of the components were refactored to be based on the official Material Design Components for Web (MDC)

Material Web Components
in Maintenance mode

Angular Material does not use or depend on MWC and is not impacted by this change.
Angular Material currently uses a library called MDC Web under the hood.
MWC was developed entirely separately from MDC Web.

Angular Material

Ubiquitous UX: Google's Material Design - intuitive, familiar patterns baked right in.
Accessibility: Built-in ARIA attributes, keyboard navigation, and screen reader compatibility.
Thriving ecosystem: Active community & dedicated Google support.
Always in sync: Guaranteed releases with every Angular update.
Effortless to integrate: Free, quick setup via Angular CLI.

Cards API v14

Cards API v18

Button API v14

Button API v18

Material 3

Google's latest design system that’s
"adaptive, personal, and expressive"

M2 Support Continues in v18

$my-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500);
$my-accent: mat.m2-define-palette(mat.$m2-pink-palette, 
			A200, A100, A400);
$my-warn: mat.m2-define-palette(mat.$m2-red-palette);

$my-theme: mat.m2-define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
   warn: $my-warn,
 ),
 typography: mat.m2-define-typography-config(),
 density: 0,
));

Visual Differences

Migrating from M2 to M3

No automated migration.
Mixins that take an M2 theme are compatible with M3 themes.
To maintain the behavior of color="primary", color="accent", or color="warn", enable the backwards compatibility styles.
To ease migration typography-hierarchy mixin can emit both old(M2) and new(M3) class names.
Enable by passing $back-compat:true to the mixin.

 @include mat.color-variants-backwards-compatibility($theme);

@include mat.typography-hierarchy($theme, $back-compat: true);

Differences between M2 & M3

Mixin Usage: M3 requires -theme, -color, -typography, -density, and -base mixins to be wrapped in a selector
(e.g., html{...}).
Component Color Variants: Color mixins instead of input.

<section class="tertiary-btn">
  <button mat-button>Print</button>
  <button mat-button>Share</button>
<section>
<button mat-button class="tertiary-btn">Download</button>

.tertiary-btn {
	@include mat.button($theme, $color-variant: tertiary);
}

Differences between M2 & M3

Unsupported Properties:
- backgroundColor for <mat-tab-group> is not supported.
- appearance="legacy" for <mat-button-toggle> is not supported.
Typography Mixins: all-component-typographies no longer emits typography-hierarchy in M3. Explicitly call typography-hierarchy mixin to include these styles.
Typography Classes: typography-hierarchy mixin outputs new CSS class names for typescale levels. Update any M2-based class names accordingly.

Theming in Material

Diagram of all Material 3 color roles

Diagram of all Material 2 color roles

https://m2.material.io/design/color/the-color-system.html#color-theme-creation

https://m3.material.io/styles/color/roles

Material 3 Theming API

Granular Customization: Fine-tune themes with CSS variables.
- Simplified Styling: No extra selector specificity.
Flexible API: Applying color variants to components via CSS.
Theming Custom Components: New Sass APIs let you access M3 theme properties for custom component creation.

$theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: mat.$violet-palette,
  ),
  typography: (
    brand-family: 'Comic Sans',
    bold-weight: 900
  ),
  density: (
    scale: -1
  )
));

ng generate @angular/material:m3-theme

Material 3 Theming API

$theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: mat.$rose-palette,
    secondary: mat.$blue-palette,
  ),
  typography: (
    brand-family: 'Comic Sans',
    bold-weight: 900
  ),
  density: (
    scale: -1
  )
));

Theme [optional]: Choice of Light vs Dark. Both generated if not specified.
Primary: App's primary color palette.
- If not specified- secondary, neutral, and neutral-variant palettes automatically generated per M3 specs.

Material 3 Theming API

$theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: mat.$rose-palette,
  ),
  typography: (
    brand-family: 'Comic Sans',
    bold-weight: 900
  ),
  density: (
    scale: -1
  )
));

Typography [optional]:
- plain-family: Font-family for body (plain-text).
- brand-family: Font-family for headings etc (brand-text)
- bold-weight: font-weight for bold text.
- medium-weight: font-weight for medium text.
- regular-weight: font-weight for regular text.

Material 3 Theming API

$theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: mat.$rose-palette,
  ),
  typography: (
    brand-family: 'Comic Sans',
    bold-weight: 900
  ),
  density: (
    scale: -1
  )
));

Density [optional]: Level of compactness of components.
- From 0 (most space) to -5 (most compact).

Component Schematics

Generate Material Design components easily

Name	Description
`address-form`	Form group consisting: Form fields, Radio controls, Buttons
navigation	Toolbar & a responsive side nav based on Material breakpoints
dashboard	Dynamic list of cards & menus aligned in a grid layout
table	Pre-configured <table> with a datasource for sorting & pagination
tree	`<mat-tree>` component to visualize a nested folder structure
drag-drop (CDK)	component that uses the CDK drag and drop directives

ng generate @angular/material:address-form <component-name>

ng generate @angular/material:navigation <component-name>

ng generate @angular/material:dashboard <component-name>

ng generate @angular/material:table <component-name>

ng generate @angular/material:tree <component-name>

ng generate @angular/cdk:drag-drop <component-name>

Component Dev Kit (CDK)

Set of behavior primitives for building UI components

Future Updates in the Works

https://angular.dev/roadmap

Senior Principal Engineer @ Secureworks

Ankita Sood

(uh nk - ee t ah s oo d)

Deep Dive into

The Material World

Deep Dive into

Angular Material's

Latest Updates

Material Design

Google’s open-source design system

Material Design

Angular Material

Material Web Components in Maintenance mode

Angular Material

Ubiquitous UX: Google's Material Design - intuitive, familiar patterns baked right in.

Accessibility: Built-in ARIA attributes, keyboard navigation, and screen reader compatibility.

Thriving ecosystem: Active community & dedicated Google support.

Always in sync: Guaranteed releases with every Angular update.

Effortless to integrate: Free, quick setup via Angular CLI.

Cards API v14

Cards API v18

Button API v14

Button API v18

Material 3

Google's latest design system that’s "adaptive, personal, and expressive"

M2 Support Continues in v18

Visual Differences

Visual Differences

Visual Differences

Visual Differences

Migrating from M2 to M3

Differences between M2 & M3

Differences between M2 & M3

Theming in Material

Material 3 Theming API

Material 3 Theming API

Material 3 Theming API

Material 3 Theming API

Component Schematics

Generate Material Design components easily

Component Dev Kit (CDK)

Set of behavior primitives for building UI components

Future Updates in the Works

Thank You !

SoodAnkita

@GuacamoleAnkita

Senior Principal Engineer
@ Secureworks

Material Web Components
in Maintenance mode

Google's latest design system that’s
"adaptive, personal, and expressive"