Angular Material Table align cell elements horizontally

Question

I have an angular material table with a column who's cells contain multiple google material icons like so:

<table mat-table [dataSource]="artistRateDataSource" class="mat-elevation-z8">

  <ng-container matColumnDef="action">

    <th mat-header-cell *matHeaderCellDef> Action </th>

    <td mat-cell *matCellDef="let rate" class="rate-action-container">
      <i matTooltip="Edit rate" class="material-icons icon-button">edit</i>
      <i matTooltip="Delete rate" class="material-icons icon-button">delete_forever</i>
    </td>

  </ng-container>

</table>

I recently updated to the most recent version of Angular Material (v15.2.6).

Before updating the icons were displayed horizontally within the cell, but since updating they now stack vertically.

I have attempted using display: flex and display: inline-flex for the cell in question. This did align the icons horizontally, but messed up the display of the cell, squashing the elements.

I'm sure there is a simple way to fix, this. Any ideas?

Thanks in advance.

Answer 1

You could try adding a container around your buttons with display: flex; like so:

<table mat-table [dataSource]="artistRateDataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef>Action</th>
    <td mat-cell *matCellDef="let rate" class="rate-action-container">
      <div class="action-button-container">
        <i matTooltip="Edit rate" class="material-icons icon-button">edit</i>
        <i matTooltip="Delete rate" class="material-icons icon-button">delete_forever</i>
      </div>
    </td>
  </ng-container>
</table>

CSS:

.action-button-container {
  display: flex;
  width: 100px;
  text-align: center;
}

Also, you may need to add some style adjustments to your rate-action-container class to give it a static width as well. Something like width: max-content.

I did not load this solution with your sample code, but have used something similar. Also, disclaimer, I am on Angular 14. Let me know if this works, other wise I can try to come up with something else for you.

Cheers!