Angular 7 + Angular Material. How to toggle icon on mat-menu dropdown expanded?

Question

I've got a problem with toggling icon on expanded <mat-menu>.
For expanding dropdown I'm using [matMenuTriggerFor]="menu".
Dropdown is expanding and hiding when I click outside the dropdown menu.

Problem :
I can't figure out how I can toggle <mat-icon>expand_more</mat-icon> to <mat-icon>expand_less</mat-icon> when dropdown is shown and in opposite way when dropdown is hidden.
I've noticed that [aria-expanded]="true" attribute is present on one of my divs when dropdown is shown. Whole attribute disappears on closing dropdown.
Can you help me achieve toggling icon on dropdown menu?

As you can see there is {{iconExpand}} interpolation where I would like to provide icon name on toggling dropdown.

<div class="NavbarUser" #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu">
  <tl-mat-button [noPadding]="true" [colorTheme]="'linkGrey'"
  class="NavbarUserName tl-mat-padding-r-base">
    {{ input.user.fullName }}
  </tl-mat-button>
  <tl-mat-image-thumbnail [size]="'small'" [thumbnailUrl]="input.user.thumbnailUrl">
  </tl-mat-image-thumbnail>

  <mat-icon class="Profile__DropdownArrow--Icon">{{iconExpand}}</mat-icon>
  <mat-menu #menu="matMenu">
    <div>
      <hr/>
    </div>
    <button mat-menu-item *ngFor="let profileButton of input.dropDownPaths"
    [routerLink]="profileButton.relativeUrl">
      <img class="Profile__Dropdown--Icons" src="{{profileButton.iconUrl}}" />
      <span class="Profile__Dropdown--Text">{{profileButton.title}}</span>
    </button>
  </mat-menu>
</div>

Answer 1

Just check the menuOpen property:

<div #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu">
  <mat-icon>
    {{menuTrigger.menuOpen ? 'expand_less' : 'expand_more'}}
  </mat-icon>
</div>