Search code examples
angularangular-materialmat-sidenav

Open mat-sidenav from end position with Mini icon variant

I am working with angular 7 and angular material. I tried to set <mat-sidenav> with Mini icon variant in position="end" I want that when I click to open the side nav all the icon remain in their place like what happening in position "start" + my text in Hebrew will be after the icon like English text in a start position. see Demo end position

any help will be blessed.

Solution

  • Try this, just added a few things to better handle the icon container since it was getting pushed to the right side.

    These are the two changes I made

    .icon-container {
  margin: 0 5px;
}

<mat-list-item>
    <p  matLine *ngIf="isExpanded">בדיקה</p>
    <div class="icon-container">
      <mat-icon mat-list-icon>home</mat-icon>
    </div>
</mat-list-item>

    https://stackblitz.com/edit/angular-b4gmby-ydh9sf