angular / angular/components

bug(MatList): Angular Material List feature doesn't respect M3 specs

Open
#33,355 1 comment 1 reaction 0 assignees View on GitHub
area: material/list gemini-triaged P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

The MatList component in Angular Material does not fully adhere to the [Material Design 3 (M3) specifications for Lists](https://m3.material.io/components/lists/specs). Specifically:

- Icon alignment: Leading icons are not vertically centered as per M3 specs (should be 16px from the top/bottom of the list item).
- Padding: List items do not use the correct horizontal padding (16px for single-line, 24px for two-line).
- Typography: Text styles (e.g., mat-line) do not match M3’s typography tokens (e.g., body-large for primary text).
- etc...

In general, the visual consistency with the M3 design system is broken especially with "mutline" list items or with meta and/or actions (primary, secondary, menu). Furthermore, override API cannot help with some aspects like gaps and positionning.

### Reproduction

Steps to reproduce:
1. Create a MatList with leading icons and multi-line text.
2. Inspect the rendered DOM and compare with [M3 List specs](https://m3.material.io/components/lists/specs).
3. Observe misalignment in icon positioning, incorrect padding, or typography mismatches.

### Expected Behavior

M3 spec is respected.

### Actual Behavior

Lots of "legacy" M2 (?) design choices applied.

### Environment

- Angular: 22
- CDK/Material: 22
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

Contributor guide

Open the contributing guide

Research direction

Start with the MatList component and reproduce the issue using leading icons and multi-line text in Chrome. Compare the rendered DOM and visual behavior against the linked Material Design 3 List specifications, focusing on icon alignment, horizontal padding, typography, gaps, and action positioning. Done means the affected list variants match the stated M3 requirements.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
design, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.