From d86a391e40906be444becb05e6507dd3b6848da9 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 20 Mar 2018 21:49:35 +0100
Subject: [PATCH] fix(expansion-panel): arrow not centered vertically and
 incorrect title font weight

* Fixes the arrow in the expansion panel header not being quite centered, due to it being based on a rotated CSS triangle. These changes switch to use an SVG which is much easier to reason about.
* Uses the correct font weight for the panel header's title.
---
 src/material/expansion/_expansion-theme.scss      |  6 +++++-
 .../expansion/expansion-panel-header.html         |  7 +++++--
 .../expansion/expansion-panel-header.scss         | 15 ++++-----------
 3 files changed, 14 insertions(+), 14 deletions(-)

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 @@
   <ng-content select="mat-panel-description"></ng-content>
   <ng-content></ng-content>
 </span>
-<span [@indicatorRotate]="_getExpandedState()" *ngIf="_showToggle()"
-      class="mat-expansion-indicator"></span>
+
+<svg [@indicatorRotate]="_getExpandedState()" *ngIf="_showToggle()"
+  class="mat-expansion-indicator" viewBox="0 0 24 24">
+  <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
+</svg>
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;
 }