Material 3 Component Overrides Demo
Angular Material Enhanced
This demo illustrates how to utilize Angular Material component overrides to customize how components look and feel. Explore custom sizing scales (sz-xsmall to sz-xlarge), corner geometries (sh-round, sh-squircle, sh-square), state modifiers (destructive), and cohesive Material 3 styling.
Sizes (
sz-xsmall to sz-xlarge)Appearances (Filled, Tonal, Outlined, Elevated/Protected, Text)
Shapes (
sh-round, sh-squircle, sh-square)Modifiers & Icon Buttons (Destructive, Icon Button, FAB, Mini-FAB, With Icon)
Sizes (
sz-xsmall to sz-xlarge)Shapes & Variations (Round, Square, Icon Group, Vertical)
Sizes (
sz-small to sz-xlarge)States & Modifiers (Checked, Unchecked, Indeterminate, Destructive, Disabled)
Sizes (
sz-small to sz-xlarge)Shapes & Variants (Round, Squircle, Square, Avatar, Removable)
Jane Doe Sizes (
sz-small to sz-xlarge)Appearances, Shapes & Controls (Fill vs Outline, Square vs Squircle, Select, Radio)
Angular 22
Sizes (
sz-xsmall to sz-xlarge)Modes & Shapes (Buffer, Indeterminate, Squircle, Square)
Sizes (
sz-xsmall to sz-xlarge)Variations (Discrete with Tick Marks, Range Slider)