How to place text under the icon angular mat tool bar-CodePudding

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

<mat-toolbar>
        <span ></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>

CodePudding user response：

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

Theproblem 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 >
    <button mat-fab color="primary" aria-label="Example icon button with a delete icon">
      <mat-icon>delete</mat-icon>
    </button>
    <span>yourtext</span>
</div>