How to change Material Icon Theme folder association
I really love the Material Icon Theme for Visual studio code. It’s very visually appealing and helps me quickly mentally locate whatever I need inside the explorer.
However, not all folder names and types are covered by default. But, they do offer a way to add your own associations with custom icons as well pre-existing icons.
Changing the icon
In this example, I’ll be changing the icon for a folder named cypress. Cypress is used for end-to-end testing so I figured I should change the default Icon to something more oriented for testing.
First, let’s go ahead and open up Visual Studio Code and hit CTRL + SHIFT + p
This should open up possible commands. Type in User Settings.
Upon opening them up, we can see the search bar, search for folder icon.
In Material-icon-theme > Folders: Associations click on “Edit in settings.json”
There should be a section called material-icon-theme.folders.associations
Inside we can start changing the folder associations
I updated it to include cypress with the test folder association.
For default images this can be used as a reference:
https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/folderIcons.png
Now cypress will show up with the updated icon:
And that’s it! Let me know in the comments below if you have any other material icon theme customizations you use!
Top comments (0)