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

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>

        <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>
        </th>
      </ng-container>
      <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 >

Answer 1

User-943250815 posted

what about use CSS Flexbox?
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.w3schools.com/css/css3_flexbox.asp

Answer 2

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:

https://codepen.io/varzin/pen/ZOoGJx

Best Regards,

YongQing.

Answer 3

User956626884 posted

Thanks Yongqing