title: How can I animate the icon in an expansion panel in Angular Material?
body: <p>I am trying animate an icon inside the title of an expansion panel.</p>
  
  <p>My HTML: </p>
  
  <p></p>
  
  <pre><code>&lt;mat-expansion-panel-header&gt;
    &lt;mat-panel-title&gt;
        &lt;mat-icon [@openClose]="panelOpenState? 'open' : 'closed'"&gt;keyboard_arrow_up&lt;/mat-icon&gt;
      Click me, all other animates
    &lt;/mat-panel-title&gt;
    &lt;mat-panel-description&gt;
      Type your name and age
    &lt;/mat-panel-description&gt;
  &lt;/mat-expansion-panel-header&gt;
  </code></pre>
  
  <p></p>
  
  <p>My component:</p>
  
  <pre><code>@Component({
    selector: 'expansion-overview-example',
    animations: [
      trigger('openClose', [
        // ...
        state('open', style({
          transform: 'rotate(0deg)'
        })),
        state('closed', style({
          transform: 'rotate(-180deg)'
        })),
        transition('open =&gt; closed', [
          animate('1s')
        ]),
        transition('closed =&gt; open', [
          animate('1s')
        ]),
      ]),
    ],
    templateUrl: 'expansion-overview-example.html',
    styleUrls: ['expansion-overview-example.css'],
  })
  export class ExpansionOverviewExample {
    panelOpenState = false;
  }
  </code></pre>
  
  <p>However. The icon on the expansion panel that is clicked does not animate (rotate in my case). I tried using the same icon, and same state on different locations in the code, and all other icons animate, so I know the trigger and animations are set up correctly.</p>
  
  <p>How can I make sure that the icon is rotating on the clicked panel as well?</p>
  
  <p>Here is a <a href="https://stackblitz.com/edit/angular-4heuy9" rel="nofollow noreferrer">Stackblitz</a> illustrating my issue</p>