Adding sorting icon in column header in Details List in Fluent UI

Question

For a DetailsList or ShimmeredDetailsList, I need to add two arrows (one up, one down) besides the column name in the column header so that the user can look at the grid and tell which column is sortable and which is not. Currently I am using isSorted and isSortedDescending in IColumn, but that only brings an up or down arrow once the user clicks on that column. It doesn't produce any icon that tells the user by just seeing the grid which column is sortable. How can that be done ?

Answer 1

You need to register the sort icon.

registerIcons({
    icons: {
    sort: <Sort />,
    sortdown: <ChevronUp />,
    sortup: <ChevronDown />,
  },
});

https://github.com/microsoft/fluentui/wiki/Using-icons#custom-svg-icons