A Quick Solution for Custom File/Folder Associations Icons Problem

[dragunDaniel]

Solution: How to Customize Icons in Visual Studio Code with Material Icons Theme

Here's an easy solution to customize icons in Visual Studio Code (VSCode). Follow these steps:

Don't try something like this:

• Create a folder named extensions/icons/ inside the .vscode folder to store your .svg files. This won't work.
  
• Write a link to the SVG icon. This is not the correct way to do it.
  

The Solution I Found

Think of VSCode as any other program. Place your cursor over the settings.json file and look at its location. You'll find it inside the .config/code/user/ folder. If you were trying to modify the settings.json file at the root of your project, you were wrong. You need to edit the settings.json file in the user configuration of VSCode.

Whether you're on Windows, Mac, or Linux, you need to open the folder where your VSCode is installed. Enable the "view hidden files" option in your file explorer to see it if necessary.

Inside, you'll find a folder called extensions, which contains all the extensions for your VSCode. Look for the folder named pkief.material-icon-theme followed by a version number. Don't confuse it with the vscode-icons-team.vscode-icons folder.

Once inside that folder, navigate to the icons folder. Inside the icons folder, you'll find all the .svg files representing the Material Icons theme icons.

To add your own .svg icons, simply copy and paste the .svg icon you want, and rename it with the name you want to use it.

Finally, in the user settings.json file, use the name of the .svg file (without the extension) to specify the custom icon you want to use.

and as you can see, there you have:

Very easy, right?

Conclusion

If you reinstall the Material Icons Theme extension, you will lose all of your custom .svg files. To prevent this, make sure to save your custom icons in another location as well. However, it's very easy to add additional custom icons. Simply place the new .svg files in the icons folder of the Material Icon Theme extension, and update the settings.json file accordingly.

[mallowigi]

This solution is flimsy, as all your changes will disappear for every update

[dragunDaniel]

You're right

[lucas-labs]

What I used to do was just create a symlink from my user/.vscode/extensions/custom-icons to any other folder... let's say /dev/custom-icons then I configured it like so:

• for folders:
  "folder-name": "../../../../custom-icons/folder-foo"

• for files:
  "coco.yaml": "../../custom-icons/bar",

I don't remember why the necessity of using different relative paths, they're probably loaded in different files.

Do not add the .svg extension

[dragunDaniel]

Your solution is very good, thank you. It works perfect.

[mallowigi]

Symlink is indeed the best solution for this