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

How to place text under the icon angular mat tool bar

我想在 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>

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

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

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>