In my React app using Material UI table, I needed a custom event on the action button that displayed text instead of the usual icons for Add, Update, or Delete. Instead of creating my own icon, I opted to use text for the button like so...
<MaterialTable
data={someData}
actions= {[
{
icon: () => "My Custom Action",
iconProps: { style: { fontSize: "10px", color: "blue" } },
tooltip: "Search Transactions",
onClick: (event, rowData) => (
alert("You did a custom on action " + rowData)
)
}
However, the text displayed by the icon is too big and looks ugly in the table, as shown in the attached screenshot[![enter image description here][1]][1]
Is there a way to apply styles to make the text smaller and fit better within the table layout?
I attempted to use iconProps to style the text, but it didn't have any effect. [1]: https://i.sstatic.net/ysht7.png