如何更改agGrid中的排序图标，如angular中字体图标中的箭头图标？

<div class="sort-icon"></div>

.sort-icon {
  width: 10px;
  height: 10px;
  background: url(path/to/arrow-icons.png) no-repeat center center;
}

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

@Component({
  selector: 'app-custom-cell-renderer',
  template: `
    <div class="sort-icon" [ngClass]="getSortIconClass()"></div>
  `,
  styles: [`
    .sort-icon {
      width: 10px;
      height: 10px;
      background: url(path/to/arrow-icons.png) no-repeat center center;
    }
    .sort-icon.asc {
      /* 设置升序排序图标样式 */
      background-position: 0 0;
    }
    .sort-icon.desc {
      /* 设置降序排序图标样式 */
      background-position: 0 -10px;
    }
  `]
})
export class CustomCellRendererComponent implements ICellRendererAngularComp {
  private params: any;

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

  getSortIconClass(): string {
    if (this.params.column.isSortAscending()) {
      return 'asc';
    } else if (this.params.column.isSortDescending()) {
      return 'desc';
    }
    return '';
  }
}

{
  headerName: 'Column Name',
  field: 'field_name',
  cellRendererFramework: CustomCellRendererComponent
}