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.

Answer 2

You are able to achieve what you want by doing some css trickery. In my use-case I only had to change the color. In the example below I added a background-image for setting your own icon.

<DetailsList onRenderDetailsHeader={(headerProps, defaultRender) => {
                                    return defaultRender({
                                        ...headerProps,
                                        styles: {
                                            root: {
                                                selectors: {
                                                    '.ms-DetailsHeader-cell': {
                                                        backgroundColor: '#0f238c',
                                                        color: 'white' 
                                                    },
                                                    '.ms-Icon': {
                                                        color: '#0f238c',
                                                        backgroundColor: '#0f238c',
                                                        backgroundImage: decendingFilter ? 'url([PATHTOIMG1])' : 'url([PATHTOIMG2])',
                                                        backgroundRepeat: 'no-repeat',
                                                        backgroundSize: 'contain',
                                                    },
                                                },
                                            }
                                        }
                                    });
                                }}
                            />