Skip to content

Instantly share code, notes, and snippets.

@rupeshtiwari
Last active June 2, 2026 07:51
Show Gist options
  • Select an option

  • Save rupeshtiwari/6860fbc1b3e2f6711c780070d6f59748 to your computer and use it in GitHub Desktop.

Select an option

Save rupeshtiwari/6860fbc1b3e2f6711c780070d6f59748 to your computer and use it in GitHub Desktop.
Custom Material Icon Folder ( customize folder icons vscode material theme)
tags vscode, material,customize folder icons vscode material theme
title How to add custom folder icon in Material icons

Steps to add custom folder icon in Material icons

Go to Settings.json file

settings.json changes

Add your custom folder and icon name

   "material-icon-theme.folders.associations": {
        "infrastructure":  "Cluster",
        "stripe":  "Resource"
    }
}

material customer folders

material folder icons

material file icons

@ShawermaBox

Copy link
Copy Markdown

thanks

@JesusHdez960717

Copy link
Copy Markdown

great job ๐Ÿ‘

@RamiresOliv

RamiresOliv commented Dec 4, 2021

Copy link
Copy Markdown

great!

@kartanusdev

Copy link
Copy Markdown

Nice dude :)

@snoweuph

Copy link
Copy Markdown

I love this extension, but Im missing the ability to set workspace specific settings, at least for me it didn't work. (Created settings.json in .vscode folder, and also got intelisense inside, but the settings didn't apply)

@heitorgiacomini

Copy link
Copy Markdown

And for icons

"material-icon-theme.files.associations": {
"*.spec.ts": "test-js"
}

@ahmedLawal

Copy link
Copy Markdown

Hello, please how can I make a setting for filenames that end with -routing.module.ts

@xoferiff

xoferiff commented Aug 9, 2022

Copy link
Copy Markdown

Hello, please how can I make a setting for filenames that end with -routing.module.ts

same

@rahff

rahff commented Aug 26, 2022

Copy link
Copy Markdown

One suggestion for UX improuvment is the possibility to set a default icon. Best Regards

@ssdeniss

Copy link
Copy Markdown

How i can do that?:
"material-icon-theme.files.associations": {
"{some title}reducer.jsx": "Redux-actions"
}

@DenysTutov

Copy link
Copy Markdown

Thank you!

@Mezzanine74

Mezzanine74 commented Jan 6, 2023

Copy link
Copy Markdown

Hello, please how can I make a setting for filenames that end with -routing.module.ts
I use "." instead of "-" in routing naming. In this case, icon format works.
"*.routing.module.ts": "whatever" // WORKS "*-routing.module.ts": "whatever" // DOENST WORK

@fnandesrafael

Copy link
Copy Markdown

You guys know if Is it possible to make something like:

"material-icon-theme.folders.associations": { "{any folder ending with:}-components": "components" },

@moacirts

moacirts commented May 6, 2023

Copy link
Copy Markdown

And for icons

"material-icon-theme.files.associations": { "*.spec.ts": "test-js" }

@heitorgiacomini Thanks!

@NazarAli

Copy link
Copy Markdown

please add cubit bloc ui domain repository

@codesinx

Copy link
Copy Markdown

This isn't working for me. Any idea why?

@aramrw

aramrw commented Nov 9, 2023

Copy link
Copy Markdown

This isn't working for me. Any idea why?

Doesn't work for me either

@escannord

Copy link
Copy Markdown

Please how can i add a custom icon for any files

@Sumith-Kumar-Saini

Copy link
Copy Markdown

What if I want to add a custom icon?

@ben-dev10

Copy link
Copy Markdown

Nicely done ๐Ÿ‘!

@alexwork1611

Copy link
Copy Markdown

Nice one, dude

@Yashrajsingh2001

Yashrajsingh2001 commented May 29, 2026

Copy link
Copy Markdown

I want to add my own SVG to a folder. Steps mentioned here are not working. Any idea how to fix the issue?

image

Edit:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment