I am trying to build a table where I have an up/down triangle icon next to the column instead of default up arrow after the column name to indicate sorting. I went through the material-ui docs and read that the IconComponent prop can be used to give an icon other than the default, but I couldn't find a way to combine two icons, one on top of the other, and pass them in as the IconComponent prop.
Here is what I have tried on CodeSandBox.
You can create a new component which is called Icon, which stacks the two icons using a flexbox container:
const Icon = () => {
return (
<span
style={{
display: "flex",
flexDirection: "column",
justifyContent: "Center",
alignItems: "Center",
marginLeft: "5px"
}}
>
<KeyBoardUpIcon fontSize="12" />
<KeyBoardDownIcon fontSize="12" />
</span>
);
};
And use it as IconComponent prop in TableSortLabels:
<TableSortLabel
active={true}
direction={orderBy === headCell.id ? order : "asc"}
IconComponent={Icon}
onClick={createSortHandler(headCell.id)}
>
