如何将编辑图标和数据放在mat表中的一个<td>中

<table mat-table [dataSource]="dataSource">
  <!-- 列定义 -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let element">{{ element.name }}</td>
  </ng-container>

  <ng-container matColumnDef="edit">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let element">
      <!-- 编辑图标 -->
      <button mat-icon-button (click)="editItem(element)">
        <mat-icon>edit</mat-icon>
      </button>
    </td>
  </ng-container>

  <!-- 列绑定 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

import { Component } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  dataSource = [
    { name: 'John Doe' },
    { name: 'Jane Smith' },
    { name: 'Bob Johnson' }
  ];

  displayedColumns = ['name', 'edit'];

  editItem(element: any) {
    // 编辑逻辑
    console.log('Edit item:', element);
  }
}