Angular Material Table单元格元素水平对齐问题求助

各位好，我碰到个Angular Material的小问题，想请大家帮忙看看：

我有一个Angular Material表格，其中一列的单元格里包含多个Google Material图标，代码如下：

<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>

我最近把Angular Material升级到了最新版本v15.2.6，升级之前图标在单元格里是水平排列的，但升级之后它们变成垂直堆叠了。

我试过给目标单元格设置display: flex和display: inline-flex，这确实让图标回到了水平对齐的状态，但却搞乱了单元格的显示，元素都被挤压变形了。

我觉得肯定有个简单的解决办法，有没有朋友有类似的经验或者想法？提前感谢大家的帮助！

备注：内容来源于stack exchange，提问作者Tom O'Brien