fix(material/list): tokenize space around leading icon

List component: tokenize space on left and right of leading icon.

Correct spacing around leading icon on M3. Currently, leading icon has
16px margin in front of icon and 32px behind. Give leading icon
symmetrical margin for M3.

Does not intend to make visual change to M2.

Author: zarend

src/material-experimental/theming/_m3-density.scss

@@ -95,6 +95,10 @@ $_density-tokens: (
   (mat, icon-button): (
     touch-target-display: (block, block, none, none),
   ),
+  (mat, list): (
+    list-item-leading-icon-start-space: (16px, 12px, 8px, 4px),
+    list-item-leading-icon-end-space: (16px, 12px, 8px, 4px),
+  ),
   (mat, text-button): (
     touch-target-display: (block, block, none, none),
   ),

src/material/core/tokens/m2/_index.scss

@@ -21,6 +21,7 @@
 @use './mat/grid-list' as tokens-mat-grid-list;
 @use './mat/icon' as tokens-mat-icon;
 @use './mat/icon-button' as tokens-mat-icon-button;
+@use './mat/list' as tokens-mat-list;
 @use './mat/menu' as tokens-mat-menu;
 @use './mat/option' as tokens-mat-option;
 @use './mat/optgroup' as tokens-mat-optgroup;
@@ -139,6 +140,7 @@
       _get-tokens-for-module($theme, tokens-mat-paginator),
       _get-tokens-for-module($theme, tokens-mat-checkbox),
       _get-tokens-for-module($theme, tokens-mat-full-pseudo-checkbox),
+      _get-tokens-for-module($theme, tokens-mat-list),
       _get-tokens-for-module($theme, tokens-mat-minimal-pseudo-checkbox),
       _get-tokens-for-module($theme, tokens-mat-protected-button),
       _get-tokens-for-module($theme, tokens-mat-radio),

src/material/core/tokens/m2/mat/_list.scss

@@ -0,0 +1,40 @@
+@use '../../token-utils';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, list);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return (
+    list-item-leading-icon-start-space: 16px,
+    list-item-leading-icon-end-space: 32px,
+  );
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

src/material/list/_list-theme.scss

@@ -7,9 +7,11 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/tokens/m2/mat/list' as tokens-mat-list;
 @use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
 @use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
 @use '../core/tokens/m2/mdc/list' as tokens-mdc-list;
+@use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 
 @mixin base($theme) {
@@ -96,6 +98,8 @@
     // Add values for MDC list tokens.
     @include sass-utils.current-selector-or-root() {
       @include mdc-list-theme.theme($mdc-list-density-tokens);
+      @include token-utils.create-token-values(
+        tokens-mat-list.$prefix, tokens-mat-list.get-density-tokens($theme));
     }
 
     .mdc-list-item__start,
@@ -180,5 +184,8 @@
 @mixin _theme-from-tokens($tokens) {
   @if ($tokens != ()) {
     @include mdc-list-theme.theme(map.get($tokens, tokens-mdc-list.$prefix));
+
+    $mat-list-tokens: token-utils.get-tokens-for($tokens, tokens-mat-list.$prefix);
+    @include token-utils.create-token-values(tokens-mat-list.$prefix, $mat-list-tokens);
   }
 }

src/material/list/list.scss

@@ -3,6 +3,7 @@
 @use '@material/list/list-theme' as mdc-list-theme;
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '../core/style/layout-common';
+@use '../core/tokens/m2/mat/list' as m2-mat-list;
 @use '../core/tokens/m2/mdc/list' as m2-mdc-list;
 @use '../core/tokens/token-utils';
 @use './list-item-hcm-indicator';
@@ -195,3 +196,15 @@ mat-action-list button {
     border: 0;
   }
 }
+
+@include token-utils.use-tokens(m2-mat-list.$prefix,
+  m2-mat-list.get-token-slots()) {
+  .mdc-list-item--with-leading-icon .mdc-list-item__start {
+    @include token-utils.create-token-slot(margin-left, list-item-leading-icon-start-space);
+    @include token-utils.create-token-slot(margin-right, list-item-leading-icon-end-space);
+    [dir='rtl'] & {
+      @include token-utils.create-token-slot(margin-right, list-item-leading-icon-start-space);
+      @include token-utils.create-token-slot(margin-left, list-item-leading-icon-end-space);
+    }
+  }
+}