css - 添加垫图标按钮

Question

<mat-toolbar color="primary">
    <button mat-icon-button (click)="menu.toggle()">
        <mat-icon>menu</mat-icon>
    </button>
    <span>{{ title }}</span>
    <button mat-icon-button (click)="logout()" >
        <mat-icon>home</mat-icon>
    </button>
</mat-toolbar>

在主页图标按钮中，我需要将其放在右上角，所以该怎么做。如何将内联 css 添加到该主页图标按钮

Answer 1

为此按钮添加唯一的类并使用css:

<button mat-icon-button class="end">
    <mat-icon>home</mat-icon>
</button>

CSS:

   .end{
      margin-left: auto;
   } 

参见此处:https://stackblitz.com/edit/angular-h8zdkh-pvavjh?file=app/chips-autocomplete-example.css