Skip to content

Commit

Permalink
fix(material/list): ensure leading icon scales with token
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
zarend committed Feb 9, 2024
1 parent 78a292b commit 7e94902
Showing 1 changed file with 7 additions and 0 deletions.
7 changes: 7 additions & 0 deletions src/material/list/list.scss
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,13 @@
@include token-utils.create-token-slot(border-radius, list-item-leading-avatar-shape);
@include token-utils.create-token-slot(background-color, list-item-leading-avatar-color);
}

// Set font-size of leading icon to same value as its width and height. Ensure icon scales to
// "list-item-leading-icon-size" token. In Angular Material, the icon is on the same element as
// ".mdc-list-item__start", rather than a child of ".mdc-list-item__start".
.mat-mdc-list-item-icon {
@include token-utils.create-token-slot(font-size, list-item-leading-icon-size);
}
}
}

Expand Down

0 comments on commit 7e94902

Please sign in to comment.