添加Mat-icon按钮

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

尝试这个

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

Answer 2

向此按钮添加唯一的class并使用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