fix(material/expansion): center indicator icon in M3 (#28603)

Currently the expansion panel arrow is drawn with borders which makes it difficult to center. It's also problematic in high contrast mode where it renders as a rectangle. We've wanted to fix this for a while, but it breaks a lot of internal screenshot tests (see #10503).

These changes resolve the issue for apps using M3 by having two indicators that we toggle using tokens.

Fixes #28037.

(cherry picked from commit 31102d0)

Author: crisbeto

src/material-experimental/theming/_custom-tokens.scss

@@ -467,6 +467,8 @@
     _generate-typography-tokens($systems, container-text, body-large),
     (
       container-shape: _hardcode(12px, $exclude-hardcoded),
+      legacy-header-indicator-display: _hardcode(none, $exclude-hardcoded),
+      header-indicator-display: _hardcode(inline-block, $exclude-hardcoded),
       container-background-color: map.get($systems, md-sys-color, surface),
       container-text-color: map.get($systems, md-sys-color, on-surface),
       actions-divider-color: map.get($systems, md-sys-color, outline-variant),

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

@@ -12,6 +12,8 @@ $prefix: (mat, expansion);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 4px,
+    legacy-header-indicator-display: inline-block,
+    header-indicator-display: none,
   );
 }
 

src/material/expansion/expansion-panel-header.html

@@ -5,5 +5,13 @@
 </span>
 
 @if (_showToggle()) {
-  <span [@indicatorRotate]="_getExpandedState()" class="mat-expansion-indicator"></span>
+  <span [@indicatorRotate]="_getExpandedState()" class="mat-expansion-indicator">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960"
+      aria-hidden="true"
+      focusable="false">
+      <path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"/>
+    </svg>
+  </span>
 }

src/material/expansion/expansion-panel-header.scss

@@ -140,18 +140,41 @@
 
 // Creates the expansion indicator arrow. Done using ::after
 // rather than havingadditional nodes in the template.
-.mat-expansion-indicator::after {
-  border-style: solid;
-  border-width: 0 2px 2px 0;
-  content: '';
-  display: inline-block;
-  padding: 3px;
-  transform: rotate(45deg);
-  vertical-align: middle;
+.mat-expansion-indicator {
+  &::after {
+    border-style: solid;
+    border-width: 0 2px 2px 0;
+    content: '';
+    display: inline-block;
+    padding: 3px;
+    transform: rotate(45deg);
+    vertical-align: middle;
+
+    @include token-utils.use-tokens(
+      tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) {
+      @include token-utils.create-token-slot(color, header-indicator-color);
+      @include token-utils.create-token-slot(display, legacy-header-indicator-display,
+        inline-block);
+    }
+  }
 
-  @include token-utils.use-tokens(
-    tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) {
-    @include token-utils.create-token-slot(color, header-indicator-color);
+  svg {
+    width: 24px;
+    height: 24px;
+
+    // The SVG icon isn't edge-to-edge so we need to offset
+    // it slightly so it's aligned correctly horizontally.
+    margin: 0 -8px;
+
+    // Since the container is `display: inline`, we need to set this to center the arrow.
+    // Ideally we'd make the container `inline-flex`, but that affects M2.
+    vertical-align: middle;
+
+    @include token-utils.use-tokens(
+      tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) {
+      @include token-utils.create-token-slot(fill, header-indicator-color);
+      @include token-utils.create-token-slot(display, header-indicator-display, none);
+    }
   }
 }