Icons should support variety of color options, rather than just light/dark theme colors

[minkyngkm]

Icons are frequently used with links. Currently, icons used with links remain black. Is it possible to match the color of the icons with the text color or to make it easy to adjust the icon color?

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-14125.

This message was autogenerated

[pastelcyborg]

Hey @minkyngkm, unfortunately this would be difficult to achieve in Vanilla currently, as our icons have their colors baked directly into their background images, allowing for only light and dark themes out of the box. Customization used to be supported, but was deprecated when our current theming approach was implemented:

https://vanillaframework.io/docs/patterns/icons#customisation

You may be able to get around this using CSS masks or other (somewhat hacky) solutions, but AFAIK, deviating from existing icon colors is not officially supported presently.

We have had a few conversations about our icon approach now, as your desire seems like something others have requested as well, so we'll continue to explore this.

[dgtlntv]

Vanilla WG: We think this is valid and icons should usually match the color of the text they are associated with. So in this context the link blue. Eg. we changed the color of the icons to black/white to match the text color.

[dgtlntv]

Vanilla WG: @bartaz this would be ready to be implemented.

[bartaz]

This is very high effort. Current Vanilla codebase is likely not going to be able to support icons in any possible colour as this would require generating separate SVG for each icon for each colour, increasing the size of code significantly.

This can be a requirement for new architecture to support that, but we need to find a shared understanding and compromise between design and implementation.

[apollo13]

Current Vanilla codebase is likely not going to be able to support icons in any possible colour as this would require generating separate SVG for each icon for each colour

This does not seem to be true, I am currently changing colors by setting currentColor as fill color and then styling that from the outside via CSS: #5382 -- I also had to change from background image to mask, but it works I guess :D

[bartaz]

Current Vanilla codebase is likely not going to be able to support icons in any possible colour as this would require generating separate SVG for each icon for each colour

This does not seem to be true, I am currently changing colors by setting currentColor as fill color and then styling that from the outside via CSS: #5382 -- I also had to change from background image to mask, but it works I guess :D

Thanks for investigation @apollo13. Indeed switching to CSS masks is something we considered, but they don't work out of the box with all our icons, so creating a systematic solution based on that required too much effort for us to consider it before.

We are currently starting to work on new architecture of the design system, so having coloured icons can be one of the considerations there. But it may still be work exploring a proposal if you have one. Thanks!

[bartaz]

Triage: we definitely need to take it as consideration/requriement for new architecture.

For current codebase we need to investigate (timebox 1-2 days max) to see how we could use CSS masks, and how much effort would it be to make them work with all our icons.