要使用CSS添加列标题图标而不破坏排序功能，可以使用Ag-Grid提供的自定义标题组件。以下是一个示例解决方法：

首先，在您的HTML文件中添加一个带有图标的自定义标题组件的容器：

然后，在您的CSS文件中添加样式以设置图标和列标题：

.custom-header-icon {
  position: relative;
}

.header-icon {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url('path/to/icon.png');
  background-repeat: no-repeat;
  background-size: contain;
}

接下来，在您的Angular组件中定义自定义标题组件：

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

@Component({
  selector: 'custom-header-component',
  template: `
    

      
      {{ params.displayName }}
    
  `,
})
export class CustomHeaderComponent {
  params: any;

  agInit(params: any) {
    this.params = params;
  }
}

最后，在您的Angular组件中的columnDefs中使用自定义标题组件：

import { Component } from '@angular/core';
import { CustomHeaderComponent } from './custom-header.component';

@Component({
  selector: 'app-root',
  template: `
    
  `,
})
export class AppComponent {
  columnDefs = [
    {
      headerName: 'Column 1',
      field: 'column1',
      sortable: true,
      headerComponentFramework: CustomHeaderComponent,
    },
    // 添加其他列定义...
  ];

  rowData = [
    { column1: 'Value 1' },
    // 添加其他行数据...
  ];

  frameworkComponents = {
    customHeaderComponent: CustomHeaderComponent,
  };
}

通过以上步骤，您可以添加自定义的列标题图标而不破坏排序功能。请将path/to/icon.png替换为您实际的图标文件路径。