FineTuning - JimiC/vscode-icons GitHub Wiki

Fine tuning

Along with the commands we introduced above, you will find some more (just press F1 and type icons):

  • Apply Icons Customization: This command will regenerate the Icons manifest with your customizations and restart the IDE for the changes to take effect.
  • Reset Project Detection Defaults: This command will reset the project detection settings to their default values.
  • Restore Default Icon Manifest: This command will revert any changes you may have applied and restore the extension to its default state.

But before you can even use them you will have to go to your settings and make your magic. The settings will provide you 2 different array items:

Each item of the array represents a file or a folder icon. The functionality is the same for files and folders.

Note that it's important to know what the current supported file extensions / icons and supported folder extensions / icons are.

Along with the previous arrays you will have 4 more settings available that will help you customize how the default icons for files and folders look like:

// this is a very simple interface.
// your configuration will simply replace the default icon. See Custom Icons sections below.
"vsicons.associations.fileDefault.file": { "icon": "myfile", "format": "svg" },

// if you want to disable default icons for folders that will do the trick
"vsicons.associations.folderDefault.folder": { "icon": "myfile", "format": "svg", "disabled": true }

Some examples

// Adding new extensions to an already supported icon.
// note: the format must match the existing one. If not, it will use the extension you provide.
"vsicons.associations.files": [
  { "icon": "js", "extensions": ["myExt1", "myExt2.custom.js"], "format": "svg" }
]

// Adding new filename extensions to an already supported icon.
// note: the format must match the existing one. If not, it will use the extension you provide.
"vsicons.associations.files": [
    { "icon": "webpack",  "extensions": ["webpack.config.test.js"], "filename": true, "format": "svg" }

// Disabling an already supported icon.
// note: this is, indeed, the functionality that presets are leveraging.
// Take into account that the disable property will hide all the icon occurrences.
// So it's an all or nothing toggle. If you want to enable the icon for just a few
// extensions instead of all the defined extensions take a look at the Overrides example below.
"vsicons.associations.files": [
  { "icon": "js", "extensions": [], "format": "svg", "disabled": true }
]

// Adding a new extension.
// note: see instructions below on custom icons.
"vsicons.associations.files": [
  { "icon": "custom", "extensions": ["custom", "my.custom"], "format": "svg" }
]

// Changing the icon to an already supported icon.
"vsicons.associations.files": [
  { "icon": "newIcon", "extensions": [""], "format": "svg", "extends": "js" }
]

// Overriding an already supported icon.
// note: the difference between overrides and extends is that overrides will completely
// remove the older icon functionality while extends will keep older settings by
// putting yours on top.
"vsicons.associations.files": [
  { "icon": "myJs", "extensions": ["js", "custom.js"], "format": "svg", "overrides": "js" }
]

// Partially disabling an icon
// In this case, you only want to show the `src` icon for `src` folders, not `sources, source`
// and the other defined icons. You may be tempted to use the `disabled` property but `overrides`
// is your friend here. Just remember that `overrides` will remove the older entry and add yours.
"vsicons.associations.folders": [
    { "icon": "src", "extensions": ["src"], "format": "svg", "overrides": "src" }
]