Angular › Angular Material Theming

What is theme density in Angular Material, and how does adjusting it affect the size of components?

Advanced

Answer

Density controls how compact or spacious Material components appear, letting you shrink padding and sizing across buttons, form fields, and other components uniformly, which is useful for data heavy applications like admin dashboards that need to fit more information on screen at once.

$my-theme: mat.define-theme((
  density: (scale: -2)
));

// A negative scale value makes components more compact

Real-world example An internal analytics dashboard applies a denser theme setting across the whole app, letting data tables and forms fit noticeably more content on screen compared to the default, more spacious Material design.

Common follow-ups: What is the valid range of density scale values Angular Material supports?;Does adjusting density affect accessibility, such as touch target sizes on mobile devices?

Angular Material & UI Component Libraries;Accessibility (a11y) in Angular