How to change sort icon in detailslist

Question

I am using detailslist, is there a quick property to change sort icon?

I find below styles but do not know how to set it

Answer 1

That's not possible because sort icon is implemented directly inside DetailsColumn.base.tsx:

{column.isSorted && (
 <IconComponent
   className={classNames.sortIcon}
   iconName={column.isSortedDescending ? 'SortDown' : 'SortUp'}
 />
)}

But if you really need that functionality you can recompose DetailsList Component. Hint:

<DetailsList
  onRenderDetailsHeader={(headerProps, defaultRender) => {
     return headerProps && defaultRender ? (
       {defaultRender({
         ...headerProps,
         onRenderColumnHeaderTooltip: props => {
           return <TooltipHost {...props} children={/* Implementation here! */} />
         }
       })}
     ) : null;
  }}
/>

Keep the same children functionality and rewrite icon render.

Codepen example for hint.