CSS trick to change color of icons?

AI-generated summary

Jagster is seeking a CSS solution to change the color of icons in their category banners, as the current implementation follows the background color of the category settings. They want to use black icons with a white background and customize the banner colors. awesomerobot suggests using the category banner theme component to override the icon color or applying CSS to set a uniform icon color:

.badge-category__icon .d-icon {
  color: var(--primary-high);
}

After we got single category style thingy colors of my category icons are now following background color of category settings and that is… not so nice.

Screenshot could explain a bit better my/theirs pain:

(Almost) sorry for strange language but hopefully you get my point.

I just refuse to setup different background colors per category. Partially because it breaks look of category banners, but mostly because those all different colors aren’t informative in any meaning, but gives very restless feel.

I understatn totally that some just loves very colorful environment but up here in noth we love minimalistic and colorless approach that maximize our depression :rofl:

Basically I need desperately help to use just black icons and otherwise using what ever color I like on category banners. White background works but then all icons are white too and on white background that is not so functional either…

The category banner theme component has the option to override the icon color in banners (so it always matches the banner text color)… so you could enable this

Screenshot 2023-11-16 at 10.44.31 AM

and set the icon color in the category icons theme component:

Screenshot 2023-11-16 at 10.45.37 AM

I could see how setting the color for each icon would be unpleasant for many categories though, so if you want it all one color, you could use CSS instead:

.badge-category__icon .d-icon {
  color: var(--primary-high);
}