From 807aec7132c5a5104a0a5ceb2b63772097eb67d8 Mon Sep 17 00:00:00 2001 From: Zach Arend Date: Thu, 8 Feb 2024 22:08:29 +0000 Subject: [PATCH] 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. --- src/material/list/list.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/material/list/list.scss b/src/material/list/list.scss index 11a3587808b8..ea91b8de35d1 100644 --- a/src/material/list/list.scss +++ b/src/material/list/list.scss @@ -74,6 +74,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); + } } }