Tips for colorized folder any type of file's icons.

[snokin]

Put this on your custom.css to colorize your folder. Result was nice. Choose low saturation color is looks more fit to file browser.

/* Using CSS selector to select folder icons */
#listing .item[data-dir=true] div i {
    color: #ffc84b;
}

The colorizing another type of file was little bit different than folder.

#listing .item[aria-label$=".mp4"] div i {
    color: #a268a1;
}

[hernandito]

Thank you!

For days I have been trying to edit the code to achieve this. What a simple elegant solution.

Can I impose on you for what it would be to change the regular “file” icon. Color and/or the icon itself. Changing the file icon from insert_drive_file to view_headline

Thank you again

h.

[jniggemann]

Thank you for pointing me here via #1698, so great! I think the documentation

[jniggemann]

@hernandito This will change the color of folder icons to yellow-ish orange

#listing .item[data-dir=true] div i {
    color: #ffc84b;
}

[jniggemann]

If you really want want to change the icon, you have to use ugly CSS hacks. But it's possible, the following changes the icon for mp3 files.
Only checked on my installation of Edge, did not try FF or other browsers.

#listing .item[aria-label$=".mp3"] .material-icons {
    position: absolute;
    visibility: hidden;
    top: 0.3em;
}

#listing .item[aria-label$=".mp3"] .material-icons::before {
    content: "hearing";
    visibility: visible;
}

[jniggemann]

In case someone is interested, I hacked a custom.css file that colorizes and changes some icons based on the file extension.
It is available here and the result looks like this:

[Teraskull]

If anyone wants to change the icons from Material to any other, for example FontAwesome:

This example styles the top right icons, in a really dirty way, using unicode:

@font-face {
    font-family: "FontAwesome";
    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf");
}

#dropdown i.material-icons {
    color: transparent !important;
}

#dropdown button i:after {
    font-family: "FontAwesome";
    color: #fff !important;
    position: absolute;
}

#dropdown button[aria-label="Info"] i:after {
    content: "\f129";
    top: 0.4em;
    left: 0.73em;
}

#dropdown button[aria-label="Download"] i:after {
    content: "\f063";
    top: 0.4em;
    left: 0.4em;
}

#dropdown button[aria-label="Upload"] i:after {
    content: "\f062";
    top: 0.4em;
    left: 0.42em;
}

#dropdown button[aria-label="Select multiple"] i:after {
    content: "\f00c";
    top: 0.4em;
    left: 0.4em;
}

#dropdown button[aria-label="Switch view"] i:after {
    content: "\f0ca";
    top: 0.4em;
    left: 0.4em;
}

#dropdown button[aria-label="Toggle shell"] i:after {
    content: "\f121";
    top: 0.4em;
    left: 0.37em;
}

Or using SVG, for example from https://css.gg/:

#dropdown button[aria-label="Download"] i:after {
    top: 0.4em;
    left: 0.4em;
    content: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 5C3 3.34315 4.34315 2 6 2H14C17.866 2 21 5.13401 21 9V19C21 20.6569 19.6569 22 18 22H6C4.34315 22 3 20.6569 3 19V5ZM13 4H6C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H18C18.5523 20 19 19.5523 19 19V9H13V4ZM18.584 7C17.9413 5.52906 16.6113 4.4271 15 4.10002V7H18.584Z" fill="white"/></svg>');
}

Please forgive me for this.

[niubility000]

Very interesting.

[hernandito]

@Jniggeman and @Teraskull,

These are terrific. Thank you!

I like the idea of highlighting certain file types. What would be the edit if I wanted to change ALL the file icons to a different color? Similar to how the folder icons are yellowish, how would I do this for all files?

Would it be this?
#listing .item[aria-label$=".*"] div i { color: #a268a1; }

Thanks again!

H.