FineTuning

Fine tuning

In this section you will find out how to change the icons associated to each extension. If you're looking for further customization in the Custom Icons section you will find information about how to use your own custom icons instead of the ones provided with the extension. Take into account that it's strongly recommended to read this section before proceeding to the Custom Icons section.

Along with the commands we introduced in the Preset section, 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:

• vsicons.associations.files: IFileExtension[]
• vsicons.associations.folders: IFolderExtension[]

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.

The basic steps for customization are:

1. Find the extension or folder you want to customize in the supported file extensions file or in the supported folder file.

2. Copy the whole entry.

3. Paste the content into your settings in one of the provided keys (i.e. "vsicons.associations.files": [your copied entry here]).

4. Modify the copied to suit your needs (see the Some Examples section below).

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

• vsicons.associations.fileDefault.file: IDefaultExtension
• vsicons.associations.fileDefault.file_light: IDefaultExtension
• vsicons.associations.folderDefault.folder: IDefaultExtension
• vsicons.associations.folderDefault.folder_light: IDefaultExtension
• vsicons.associations.folderDefault.root_folder: IDefaultExtension
• vsicons.associations.folderDefault.root_folder_light: IDefaultExtension

// this is a very simple interface.
// your configuration will simply replace the default icon. See Custom Icons sections.
// set useBundleIcons to true if you want to reuse one of the bundled icons for the default file or folder.
"vsicons.associations.fileDefault.file": { "icon": "myfile", "format": "svg", "useBundledIcons": true },

// 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" }
]

// Providing an alternate light-mode icon.
// If you want to render a different icon in dark-mode vs. light-mode, set `light` to `true`
// to instruct vscode-icons to check for a file matching `file_type_light_<icon>`.
"vsicons.associations.folders": [
  { "icon": "src", "extensions": ["src"], "format": "svg", "light": true }
]

// 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" }
]