change the default icon in angular material

Question

I am having code of nested menu of angular material it works good but I don't want default arrow_right icon how to remove the default arrow_right icon?`

<button mat-button [matMenuTriggerFor]="main_menu">WOMEN<mat-icon>arrow_drop_down</mat-icon></button>
    <mat-menu #main_menu="matMenu">
        <ng-container *ngFor="let cats of cat?.women">
            <button class="matmenu" mat-menu-item [matMenuTriggerFor]="sub_menu" (click)="Clickcat(cats.cat_id,cats.category)">{{ cats.category }}</button>
            <mat-menu #sub_menu="matMenu">
                <button *ngFor="let subcats of cats.subcategories" (click)="Clickcatsub(subcats.sub_cat_id)" mat-menu-item>{{ subcats.sub_cat }}</button>
            </mat-menu>
        </ng-container>
    </mat-menu>

the link referenced: stackblitz

Answer 1

You can override using CSS

.mat-menu-item-submenu-trigger::after {
    display: none;
}