mat-list-items показывают горизонтальный, а не вертикальный угол 8

Question

Я добавляю ссылки на боковую навигацию, но она отображается не по вертикали, а по горизонтали.

Отображаемая боковая панель

Ниже приведен угловой код:

<mat-sidenav-container>
    <mat-sidenav #sidenav role="navigation">
        <mat-nav-list>
            <a mat-list-item [routerLink]="'/signup'">
                <mat-icon>face</mat-icon>
                <span class="nav-caption">Signup</span>
            </a>
            <a mat-list-item [routerLink]="'/login'">
                <mat-icon>input</mat-icon>
                <span class="nav-caption">Login</span>
            </a>
            <a mat-list-item [routerLink]="'/training'">
                <mat-icon>
                    fitness-center
                </mat-icon>
                <span class="nav-caption">Training</span>
            </a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar color="primary">
            <mat-toolbar-row>
                <div fxHide.gt-xs>
                    <button (click)="sidenav.toggle()">
                        <mat-icon>
                            menu
                        </mat-icon>
                    </button>
                </div>
                <div><a [routerLink]="'/'">Logo</a></div>
                <div fxFlex fxLayout fxLayoutAlign="flex-end" fxHide.xs>
                    <mat-nav-list>
                        <a mat-list-item [routerLink]="'/signup'"> Signup </a>
                        <a mat-list-item [routerLink]="'/login'"> Login </a>
                        <a mat-list-item [routerLink]="'/training'"> Training </a>
                    </mat-nav-list>
                </div>
            </mat-toolbar-row>
        </mat-toolbar>
        <main>
            <router-outlet></router-outlet>
        </main>
    </mat-sidenav-content>
</mat-sidenav-container>

Есть ли что-то еще, кроме CSS?