Mat-list-item dynamic

Question

I am doing a sidebar that hides the label and shows only an icon when a button is click. The problem that I have is that the mat-list-item in the mat-sidenav does not shows the whole label.

I have tried adding width to 100px to the mat-list-item but this stops doing the sidebar's size dynamic. What I want is that whenever the button is clicked, the sidebar shows the whole menu with the labels and icons or just the icons. Also, I will like that if a label is too large, it will show it in two lines in the menu.

<mat-sidenav-container autosize class="app-container">
    <mat-sidenav opened="isExpanded" #sidenav mode="side" [class.mat-elevation-z4]="true" class="app-sidenav">
        <mat-nav-list>
            <mat-list-item routerLink="#">
                <i class="fa-solid fa-boxes-stacked"></i>
                <span *ngIf="isExpanded" style="padding-left: 5%;">Stock</span>
            </mat-list-item>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <router-outlet>
            <div class="app-sidenav-content">
                Components open here
            </div>
        </router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container> 

This is how it looks like: Label not showing correctly

How I want it to show: Sibebar showing label Sidebar hiding label