ag-grid表头单元格添加图标

要在 ag-grid 表头单元格中添加图标，可以使用自定义表头组件。下面是一个示例：

首先，在你的组件文件中，定义一个带有图标的表头组件，例如：

import { Component } from '@angular/core';
import { IHeaderParams } from 'ag-grid-community';

@Component({
  selector: 'app-header-icon',
  template: `
    <div class="header-icon">
      <i class="fa {{params.icon}}"></i>
      {{params.displayName}}
    </div>
  `,
  styles: [`
    .header-icon {
      display: flex;
      align-items: center;
    }
    .header-icon i {
      margin-right: 5px;
    }
  `]
})
export class HeaderIconComponent {
  params: IHeaderParams;
}

然后，在你的 ag-grid 组件中，指定自定义表头组件。例如：

import { Component } from '@angular/core';
import { ColDef } from 'ag-grid-community';
import { HeaderIconComponent } from './header-icon.component';

@Component({
  selector: 'app-ag-grid',
  template: `
    <ag-grid-angular
      [rowData]="rowData"
      [columnDefs]="columnDefs"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
  `
})
export class AgGridComponent {
  rowData = [
    { make: 'Toyota', model: 'Camry', price: 25000 },
    { make: 'Ford', model: 'Fusion', price: 28000 },
    { make: 'Honda', model: 'Accord', price: 30000 }
  ];
  columnDefs: ColDef[] = [
    {
      headerName: '',
      field: '',
      width: 50,
      headerComponentFramework: HeaderIconComponent,
      headerComponentParams: {
        icon: 'fa-sort',
        displayName: ''
      }
    },
    { headerName: 'Make', field: 'make' },
    { headerName: 'Model', field: 'model' },
    { headerName: 'Price', field: 'price' }
  ];

  onGridReady(params: any) {
    params.api.sizeColumnsToFit();
  }
}

在上面的示例中，我们使用了 Font Awesome 图标，并将其添加到了表头中。你可以根据需要自定义表头组件并使用不同的图标库。