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

添加Mat-icon按钮

2 个答案: