'Is there a way I can combine two icons, one on top of the other, as the IconComponent in Table header using Material UI

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.

Table column showing the header text 'activity' with an up triangle icon and a down triangle icon stacked on top of each other

Here is what I have tried on CodeSandBox.

javascriptcssreactjsmaterial-ui


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions