How to place text under the icon angular mat tool bar

Question

I want to place icon text under the icon in angular mat tab

<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

Do you really want the Text inside the button? I mean the text inside the circle? Or maybe outside?

The problem would be, that the button has to be expanded, so that your text can fit into that button. Else it wouldn't be visible because of the overflow. I recommend you to put the text outside and just add the (click) onto your container.

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>