[Feature Request] Custom Icon Colors

[deniszholob]

While there is a way to change folder colors, it would be great if icons could change as well. Something similar proposed in #768

For example the Angular icon set contains 7 different preset colors associated with a filename.something.ts

Angular (red)
Angular-component (blue)
etc...

Godot had 2, blue and green Lots of others just have 1

What would be great is if developers could have their own associations based on whatever color they want, instead of having to add various color icons into the repo

"material-icon-theme.files.associations": {
    "*.model.ts": { name: "angular", color: "#ef00ff" },
    "*.component.gd": { name: "godot", color: "#ffc400" },
    "*.tscn": { name: "godot", color: "#00ff04" },
    "*.gd" : "godot"
  },

Ideas on implementation:

• Have an "accent" id or class property for color in svgs that can be searched for and the fill color replaced with provided custom color
• Recoloring icons with a filter as a whole? Not sure if this is as usefull

[PKief]

Thanks for the idea, it sounds very nice. Personally, I think it's too much effort and it's not a feature which is highly requested. There might be various edge cases where this might not work properly as an icon can have multiple colors, too. I mean we're talking about more than 900 icons where we would need to figure out how it's possible or not. So that's why I'm not sure if I want to spend some effort here. But we can keep this issue open if someone else might find some time and makes a proposal

[deniszholob]

@PKief I took a look at icons more closely and yeah... there are some rainbow colored ones like appsscript or gcp or figma I think the simplest solution then is just applying a color filter on an svg if a user provides a custom color

I made a proof of concept

• https://deniszholob.github.io/svg-colorizer-poc/index.html
• https://deniszholob.github.io/svg-colorizer-poc/mat-icons.html

Here is my repo https://github.com/deniszholob/svg-colorizer-poc Mainly this file https://github.com/deniszholob/svg-colorizer-poc/blob/main/util/colorizer.js#L49 with helpers from https://github.com/deniszholob/svg-colorizer-poc/blob/main/util/color.util.js#L130

Essentially i was thinking of the Photoshop/Photopea hue/saturation filter when pressing the "colorize" button. So it applies the color but keeps the shade. That's where the adjustHue() and calculateHueAngle() function comes into play. We just find how to get to the target color from the initial color.

I did this for Figma icon, then ran it through all the icons in this repo on the other page https://deniszholob.github.io/svg-colorizer-poc/mat-icons.html

So i think using this code for colorizing and adding some code to modify the config in this repo to accept optional colorizer color we can make this happen