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