title: How to display down/ up arrow based on selection on dropdown?
body: <p>I want to change the <strong>up/down arrow</strong> based on selection. If dropdown is open arrow should point up and if it's closed arrow should point down. I'm also trying to move the <strong>&quot;clear&quot; icon</strong> to the left of the arrow icon (currently it shows on the right). Can anyone point me in the right direction? Please see attached pictures:</p>
  <p>Here's my  <a href="https://stackblitz.com/edit/angular-c7hgum-hhpcej?file=src%2Fapp%2Fselect-overview-example.ts" rel="nofollow noreferrer"><strong>LIVE DEMO</strong></a></p>
  <pre><code>&lt;mat-form-field [floatLabel]=&quot;'never'&quot;&gt;
      &lt;mat-label&gt;Search&lt;/mat-label&gt;
      &lt;mat-select [(ngModel)]=&quot;selectedFood&quot; disableOptionCentering panelClass=&quot;dva-mat-select-container&quot;&gt;
          &lt;mat-option *ngFor=&quot;let item of foods&quot; [value]=&quot;item.value&quot;&gt;
          {{ item.viewValue }}
          &lt;/mat-option&gt;
      &lt;/mat-select&gt;
      &lt;button mat-button matSuffix *ngIf=&quot;selectedFood&quot; mat-icon-button aria-label=&quot;Clear&quot;
      (click)=&quot;onClick($event)&quot;&gt;
        &lt;mat-icon&gt;close&lt;/mat-icon&gt;
    &lt;/button&gt;
  &lt;/mat-form-field&gt;
  </code></pre>