From ed59591c03cb5e942b024df6ed843259bbcfd0bf Mon Sep 17 00:00:00 2001 From: Ahmed Date: Thu, 5 Nov 2026 20:20:55 +0000 Subject: [PATCH] fix(material/list): use theme spacing for leading icons in RTL In RTL, the leading icon of a list item had its margins hardcoded to `32px` and `16px`, instead of using the `leading-icon-start-space` and `leading-icon-end-space` tokens like in LTR. The rule has to use physical properties, because icon font stylesheets (e.g. Material Icons/Symbols) set `direction: ltr` on the icon, which makes the logical margins resolve as LTR inside an RTL list. With the M2 values (16px/32px) this happened to look correct, but with M3 (16px/16px, smaller with density) the gap between the icon and the text was twice as large in RTL. These changes swap the token values in the RTL rule instead of hardcoding them, so RTL mirrors LTR for any theme. Fixes #30537. --- src/material/list/_list-inherited-structure.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/material/list/_list-inherited-structure.scss b/src/material/list/_list-inherited-structure.scss index 1572eb7e69bc..3000e843dd36 100644 --- a/src/material/list/_list-inherited-structure.scss +++ b/src/material/list/_list-inherited-structure.scss @@ -117,9 +117,12 @@ $fallbacks: m3-list.get-tokens(); margin-right: 32px; } + // Icon font stylesheets (e.g. Material Icons/Symbols) set `direction: ltr` on the icon, so + // the logical margins from `list.scss` resolve as LTR inside an RTL list. Swap the token + // values here instead of hardcoding them, so that RTL mirrors LTR for any theme. [dir='rtl'] .mdc-list-item--with-leading-icon & { - margin-left: 32px; - margin-right: 16px; + margin-left: token-utils.slot(list-list-item-leading-icon-end-space, $fallbacks); + margin-right: token-utils.slot(list-list-item-leading-icon-start-space, $fallbacks); } .mdc-list-item--with-leading-icon:hover & {