Change column description button icon

[suriyaprashath]

Hi,
Below is the current icon used for the column description button:

Since it is an exclamation icon users are confusing it to warning instead of seeing it as an information icon. So I would like to customize the icon used.
I don’t see any css variables or classes to directly customize the icon or styles from the documentation though it is mentioned we can customize the button style using CSS styles.

What would be the right way to customize the icon and styles of the description button?
 
Thanks,
Suriya

[yavordashew]

Hi Suriya,
If you want to change the icon use the CSS variable of the icon to change it according to your needs like:
--smart-icon-attention-circled: 'your icon'
Or set it to other variable:

.smart-grid{
    --smart-icon-attention-circled: var( --smart-icon-docs )
}

We are aware that we have some missing stuff in the documentation but we work on to adding more and more to it.
However if you want to see more of the CSS variables you can do so by inspecting the element and in the ‘Styles’ sidebar you can find all of them.
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[suriyaprashath]

Hi Yavor,
 
I too was thinking about the approach you have mentioned but wanted to double-check on it. Thanks for the clarifications 🙂
Also, if it makes sense please look at changing the icon to ‘i’ icon instead of the ‘!’ icon which feels like some kind of warning.
 
Thanks,
Suriya

[Author]

Posts