title: How to change angular material side-nav hamburger menu when clicked?
body: <p>I'm creating an angular 7 app , and using angular material side-nav bar.i want to change hamburger menu to cross icon when i click on side-nav appear and side-nav close then cross icon change to hamburger menu icon.</p>
  
  <pre><code>//html code
  &lt;mat-sidenav-container class="sidenav-container"&gt;
  &lt;mat-sidenav #drawer class="sidenav" fixedInViewport="true"
    [attr.role]="'dialog'"
    [mode]="'over'"
    [opened]="!(isHandset$ | async)"&gt;
  &lt;mat-toolbar&gt;Menu&lt;/mat-toolbar&gt;
  &lt;mat-nav-list&gt;
    &lt;a mat-list-item href="#"&gt;Link 1&lt;/a&gt;
    &lt;a mat-list-item href="#"&gt;Link 2&lt;/a&gt;
    &lt;a mat-list-item href="#"&gt;Link 3&lt;/a&gt;
  &lt;/mat-nav-list&gt;
  &lt;/mat-sidenav&gt;
  &lt;mat-sidenav-content&gt;
  &lt;mat-toolbar color="primary"&gt;
    &lt;button
      type="button"
      aria-label="Toggle sidenav"
      mat-icon-button
      (click)="drawer.toggle()"
      *ngIf="true"&gt;
      &lt;mat-icon aria-label="Side nav toggle icon"&gt;menu&lt;/mat-icon&gt;
    &lt;/button&gt;
    &lt;span&gt;web-doctor&lt;/span&gt;
  &lt;/mat-toolbar&gt;
  
  &lt;div style="height: 500px"&gt;abc&lt;/div&gt;
  &lt;ng-content&gt;
  &lt;/ng-content&gt;
  
  &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p>Below css file</p>
  
  <pre><code>   //css
     .sidenav-container {
     height: 100%;
     }
  
    .sidenav {
    width: 200px;
    margin-top: 72px;
    }
  
   .sidenav .mat-toolbar {
    background: inherit;
    }
  
   #drawer {
   position: fixed;
   }
  
   .mat-toolbar.mat-primary {
    position: sticky;
    top: 0;
    z-index: 1;
   }
  </code></pre>