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.

Author: crisbeto

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

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>

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