无法在Angular ag-grid中设置列标题的sortUnSort图标

我之前也踩过这个坑！ag-Grid里的sortUnSort图标配置确实容易让人困惑，结合你的代码，给你几个可行的解决方案：

方法一：通过gridOptions配置全局或列级图标 #

首先要明确：ag-Grid默认是关闭sortUnSortIcon的（这就是官方说默认无图标的原因），所以第一步要先开启这个属性，再自定义图标。

修改你的代码如下：

constructor() {
  // TODO: The table has to be build dynamically.
  this.gridOptions = {
    // 全局默认列配置，所有列都会继承这个设置
    defaultColDef: {
      sortable: true, // 确保列允许排序，否则图标不会显示
      sortUnSortIcon: true, // 开启未排序状态的图标显示
      // 自定义未排序状态的图标
      icons: {
        sortUnSort: '<i class="fa fa-sort"></i>' // 这里用Font Awesome图标举例，你可以换成自己的SVG或其他图标
      }
    },
    columnDefs: [
      { headerName: 'County', field: 'country'},
      { headerName: 'ModelName', field: 'model' },
      { headerName: 'Address', field: 'address' },
      { headerName: 'Equipment', field: 'equipment' } // 补全字段名，避免语法问题
    ]
  }
}

如果只想给特定列设置图标，不用全局defaultColDef，直接在对应的columnDef里添加sortUnSortIcon和icons配置即可。

方法二：通过CSS自定义图标样式 #

如果你不想修改JS代码，也可以用CSS覆盖ag-Grid默认的空图标样式：

/* 针对未排序状态的图标 */
.ag-icon-sort-unasc::before,
.ag-icon-sort-unasc::after {
  content: "\f0dc"; /* 这里是Font Awesome的sort图标编码，根据你用的图标库调整 */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #666; /* 自定义图标颜色 */
}

这种方法需要确保你已经引入了对应的图标字体资源（比如Font Awesome的CSS文件）。

注意事项 #

• 一定要确保列的sortable属性为true，如果列不允许排序，sortUnSort图标根本不会渲染
• 如果使用Angular/React/Vue等框架集成ag-Grid，要确认图标库已经正确引入到项目中
• 不同版本的ag-Grid配置可能略有差异，建议对照你使用的版本的官方文档核对配置项

内容的提问来源于stack exchange，提问作者ak.leimrey