Angular Incorrect Margin-Left Applied To Sidenav Content

I have similar problem that was fixed with setting to

mat-sidenav-content {
    margin-left: 0 !important;
    flex: 1 1 auto;
}

and

mat-sidenav {
    flex: 0 1 auto;
}

together with [style.position]="sidenav.opened ? 'initial' : 'absolute'" and flex to mat-sidenav-container.

Looks like I found the issue. Inside sidenav-group I had

<i class="material-icons" *ngIf="!displayBody">keyboard_arrow_down</i>
<i class="material-icons" *ngIf="displayBody">keyboard_arrow_up</i>

When I should have

<mat-icon mat-list-icon *ngIf="!displayBody">keyboard_arrow_down</mat-icon>
<mat-icon mat-list-icon *ngIf="displayBody">keyboard_arrow_up</mat-icon>

For some reason the <i> would sometimes insert extra space.

use autosize

<mat-sidenav-container autosize>
<mat-sidenav-container>

Related