Use variant prop instead of custom classes for icon color

What does this MR do and why?

Use variant prop instead of custom classes for icon color

References

To better support dark mode we are migrating deprecated color usage (e.g. $gray-100) to use semantic design tokens &15844. Semantic design tokens have specific values for light and dark mode, instead of the previous approach of inverting colors between modes. This means that color are better suited for dark mode. See more Design token FAQs. Current design token adoption can be viewed with the code scanner.

Screenshots or screen recordings

Contextual screenshots added to diffs

How to set up and validate locally

Contextual instructions added to diffs

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.