angular / angular/components

bug(mat-list-item): Color of mat-icon in mat-list does not get applied

Open
#26,804 1 comment 3 reactions 0 assignees View on GitHub
area: material/list P2
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

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

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

15.1.6

### Description

Setting the color input on the mat-icon in a mat-list-item does not get applied. The color of the icon gets overridden by the class .mat-mdc-list-item-icon. Before the default color could be overriden.

### Reproduction

Steps to reproduce:
1. Check List example in 15.1.6: https://stackblitz.com/edit/angular-o9oxb4
2. Example in 15.2.2: https://stackblitz.com/edit/angular-wdvemx

### Expected Behavior

Configured color input of mat-icon should be applied.

### Actual Behavior

Configured color input of mat-icon does not get applied and because it gets overriden.

### Environment

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

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz List examples and compare the mat-list-item behavior between versions 15.1.6 and 15.2.2, focusing on mat-icon color and the .mat-mdc-list-item-icon class. Done means a configured mat-icon color is applied in the current version as it was in 15.1.6.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.