Thanks @tank666 for your file.
I have two large libraries I’m managing for my team (one for icons, one for UI components) and was struggling to make icon colors work for both dark and light theme for several hours this afternoon. Here’s what worked for me:
- Do the Union trick from Rogie’s file: for me, I duplicate my expanded icon in place (cmd+d), then union the two dupes, delete one of them, rename the union item to something like “color_fix”, the icon vector itself to “Union”, and the frame containing it all to the name I want for the icon (e.g. “keyboard”). Convert this to a component if it isn’t one already.
- Make sure all the items are set to Scale for height and width
- Make sure no color styles are applied anywhere in the stack; just some generic black color or whatever
- Publish the icon library
- Accept the icon library updates in the UI components library
- In the UI components library have a component with two icons in it, one for light theme and one for dark
- Use those icon components throughout the UI components library file.
- Apply the colors you want to the light icon and dark icon (I applied the color on the level of the item labeled “color_fix”)
Doing all of that enabled me to actually see the icons scale correctly to several different sizes within different components and also reflect the correct color depending on which theme the UI component pertained to.