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

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.

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);
+    }
   }
 }