Skip to content

Commit 581e42f

Browse files
committed
fix(material/list): ensure leading icon scales with token
Correct the font size of leading icon in List component. Set font-size of leading icon to same value as its width and height. Ensure Ensure icon scales to "list-item-leading-icon-size" token. Fix icon with cut-off appearance when "list-item-leading-icon-size" is less than 24px.
1 parent 0153667 commit 581e42f

File tree

1 file changed

+7
-0
lines changed

1 file changed

+7
-0
lines changed

src/material/list/list.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,13 @@
7575
@include token-utils.create-token-slot(border-radius, list-item-leading-avatar-shape);
7676
@include token-utils.create-token-slot(background-color, list-item-leading-avatar-color);
7777
}
78+
79+
// Set font-size of leading icon to same value as its width and height. Ensure icon scales to
80+
// "list-item-leading-icon-size" token. In Angular Material, the icon is on the same element as
81+
// ".mdc-list-item__start", rather than a child of ".mdc-list-item__start".
82+
.mat-mdc-list-item-icon {
83+
@include token-utils.create-token-slot(font-size, list-item-leading-icon-size);
84+
}
7885
}
7986
}
8087

0 commit comments

Comments
 (0)