How can I align a Material icon with header text on the same line? RRS feed

  • Question

  • User956626884 posted

    I am working on an Angular Material webpage. I added a mat-icon next to the header text. After I added the mat-icon, the icon and text are not perfectly aligned. The icon is not vertically centered and looks a little too high. The header text is not aligned with the other column text and looks a little low.

    The closest I got was when I moved the mat-icon inside the tag with the text.

    Here is my code

      <table mat-table [dataSource]="dataSource">
            <ng-container matColumnDef="column1">
               <th  mat-header-cell *matHeaderCellDef style="text-align: center !important" [attr.colspan]="2"><h2>Column 1</h2></th>
            <ng-container matColumnDef="column2">
              <th *matHeaderCellDef  style="text-align: center !important" [attr.colspan]="2">                       
                <h2><mat-icon class="pointer"  style="padding-bottom: 0px; padding-right: 1px; cursor: pointer;"         >arrow_left</mat-icon>Column 2</h2>
          <tr mat-header-row *matHeaderRowDef="displayedGroupColumns; sticky: true"></tr>
          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        </table >
    Friday, June 21, 2019 6:00 PM


  • User665608656 posted

    Hi comicrage,

    According to your description, I suggest you could add css style to your mat-icon and the header text like below:

        display: inline-flex;
        vertical-align: middle;

    Here is an example link, you could refer to it:


    Best Regards,


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 24, 2019 2:09 AM

All replies