diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
index 9e0ced8efbe7..583e8fc938f9 100644
--- a/src/material-experimental/theming/_custom-tokens.scss
+++ b/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),
diff --git a/src/material/core/tokens/m2/mat/_expansion.scss b/src/material/core/tokens/m2/mat/_expansion.scss
index 0d0f473f5b37..85e443de8e0e 100644
--- a/src/material/core/tokens/m2/mat/_expansion.scss
+++ b/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,
);
}
diff --git a/src/material/expansion/expansion-panel-header.html b/src/material/expansion/expansion-panel-header.html
index c00f7da4cddb..84c077279b98 100644
--- a/src/material/expansion/expansion-panel-header.html
+++ b/src/material/expansion/expansion-panel-header.html
@@ -5,5 +5,13 @@
@if (_showToggle()) {
-
+
+
+
}
diff --git a/src/material/expansion/expansion-panel-header.scss b/src/material/expansion/expansion-panel-header.scss
index 2380200e0d07..9cf896fa6e19 100644
--- a/src/material/expansion/expansion-panel-header.scss
+++ b/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);
+ }
}
}