title: Change default expansion panel arrow colour for angular material
body: <p>I have an angular expansion panel as shown below. How can i change the color of the arrow below to white?</p>
  
  <p>My code (HTML): </p>
  
  <pre><code>&lt;md-expansion-panel&gt;
    &lt;md-expansion-panel-header&gt;
      &lt;md-panel-title&gt;
        Personal data
      &lt;/md-panel-title&gt;
      &lt;md-panel-description&gt;
        Type your name and age
      &lt;/md-panel-description&gt;
    &lt;/md-expansion-panel-header&gt;
  
    &lt;md-form-field&gt;
      &lt;input mdInput placeholder="First name"&gt;
    &lt;/md-form-field&gt;
  
    &lt;md-form-field&gt;
      &lt;input mdInput placeholder="Age"&gt;
    &lt;/md-form-field&gt;
  &lt;/md-expansion-panel&gt;
  </code></pre>
  
  <p>My code (TS):</p>
  
  <pre><code>import {Component} from '@angular/core';
  
  /**
   * @title Basic expansion panel
   */
  @Component({
    selector: 'expansion-overview-example',
    templateUrl: 'expansion-overview-example.html',
  })
  export class ExpansionOverviewExample {}
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/iKP7r.png" rel="noreferrer"><img src="https://i.stack.imgur.com/iKP7r.png" alt="enter image description here"></a></p>