diff --git a/src/material/expansion/_expansion-theme.scss b/src/material/expansion/_expansion-theme.scss
index 2212561c66c4..affaa2583bef 100644
--- a/src/material/expansion/_expansion-theme.scss
+++ b/src/material/expansion/_expansion-theme.scss
@@ -41,7 +41,7 @@
}
.mat-expansion-panel-header-description,
- .mat-expansion-indicator::after {
+ .mat-expansion-indicator {
color: mat-color($foreground, secondary-text);
}
@@ -67,4 +67,8 @@
.mat-expansion-panel-content {
@include mat-typography-level-to-styles($config, body-1);
}
+
+ .mat-expansion-panel-header-title {
+ font-weight: mat-font-weight($config, title);
+ }
}
diff --git a/src/material/expansion/expansion-panel-header.html b/src/material/expansion/expansion-panel-header.html
index 41c329965859..f1ccdc1bdd6c 100644
--- a/src/material/expansion/expansion-panel-header.html
+++ b/src/material/expansion/expansion-panel-header.html
@@ -3,5 +3,8 @@
-
+
+
diff --git a/src/material/expansion/expansion-panel-header.scss b/src/material/expansion/expansion-panel-header.scss
index 4215c2c05a72..62ffc2ec1f90 100644
--- a/src/material/expansion/expansion-panel-header.scss
+++ b/src/material/expansion/expansion-panel-header.scss
@@ -51,16 +51,9 @@
flex-grow: 2;
}
-/**
- * Creates the expansion indicator arrow. Done using ::after rather than having
- * additional nodes in the template.
- */
-.mat-expansion-indicator::after {
- border-style: solid;
- border-width: 0 2px 2px 0;
- content: '';
+.mat-expansion-indicator {
display: inline-block;
- padding: 3px;
- transform: rotate(45deg);
- vertical-align: middle;
+ width: 24px;
+ height: 24px;
+ fill: currentColor;
}