如何在图标angular mat toolbar 下放置文字

Question

我想在 angular 垫选项卡

中的图标下方放置图标文本

<mat-toolbar>
        <span class="spacer"></span>
        <button type="button" (click)="printBillOfLading()" mat-icon-button>
          <mat-icon>print</mat-icon>
<!-- I NEED TO PUT PRINT LABLE IN HERE -->
        </button>
</mat-toolbar>

Answer 1

您真的想要按钮内的文本吗？我的意思是圆圈内的文字？或者在外面？

问题是，必须展开按钮，以便您的文本适合该按钮。否则它不会因为溢出而不可见。我建议您将文本放在外面，只需将（单击）添加到您的容器上即可。

CSS:

.example-button-container{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 120px;
}

HTML:

<div class="example-button-container">
    <button mat-fab color="primary" aria-label="Example icon button with a delete icon">
      <mat-icon>print</mat-icon>
    </button>
    <span>Print</span>
</div>

如何在图标angular mat toolbar 下放置文字

How to place text under the icon angular mat tool bar

angular

sass

angular-material

mat-tab

mat-dialog