Align horizontally element in the header page

I use angular material and css style to align my element of header page. I want to align the three icons (settings, help_outline and person_outline ) right.

<mat-toolbar color="primary"><mat-toolbar-row><button mat-icon-button (click)="toggleSideBar()"><mat-icon>menu</mat-icon></button><span> APP LOGO </span><div fxFlex fxLayout="row" fxLayoutAlign="flex-end"><ul fxLayout="row" fxLayoutGap="20px" style="display: flex; align-items: flex-end;"><li><button mat-icon-button><mat-icon>settings</mat-icon></button></li><li><button mat-icon-button><mat-icon>help_outline</mat-icon></button></li><li><button mat-button [matMenuTriggerFor]="menu"><mat-icon>person_outline</mat-icon></button><mat-menu #menu="matMenu"><button mat-menu-item><mat-icon>exit_to_app</mat-icon>                            Sign out</button></mat-menu></li></ul></div></mat-toolbar-row></mat-toolbar> 

Any idea to do this?