vscode material icon theme Download - vscode material icon theme Source code download

vscode material icon theme

Other source code

v5.14.1

Download

.vscode/extensions folder.

In our example we place them into an icons folder inside of the .vscode/extensions folder:

.vscode
 ┗ extensions
   ┗ icons
     ┣ folder-sample.svg
     ┗ folder-sample-open.svg

In the settings.json (User Settings only!) the folder icons can be associated to a folder name (e.g. "src") like this:

"material-icon-theme.folders.associations": {
    "src": "../../../../icons/folder-sample"
}

Custom folder icon clones

It's also possible to clone existing folder icons and change their colors to create new icons that can be associated with folder names. The following example shows how to clone the admin folder icon:

"material-icon-theme.folders.customClones": [
  {
    "name": "users-admin",
    "base": "admin",
    "color": "light-green-500",
    "lightColor": "light-green-700",
    "folderNames": ["users"]
  },
  {
    "name": "roles-admin",
    "base": "admin",
    "color": "purple-400",
    "folderNames": ["roles"]
  }
]

This will create two new icons called users-admin and roles-admin that are associated with the folder names users and roles respectively. The base property defines the icon that should be cloned (in this case the admin folder icon). The color property defines the color of the new icon. The lightColor property is optional and defines the color of the icon when Visual Studio Code is running with a light color theme. The folderNames property defines the folder names that should be associated with the new icon.

Although you can use any #RRGGBB color for the color and lightColor properties, if you want to stick with colors from the material palette, you can check the full list of allowed aliases here.
You can check the full list of available icon to be used as the base here.

Language associations

With the following configuration you can customize the language icons. It is also possible to overwrite existing associations.

"material-icon-theme.languages.associations": {
    "languageId": "iconName",
    "json": "json"
}

You can see the available icon names in the overview above. See "Known language identifiers" in the VS Code documentation for a list of permitted values for languageId.

Commands

Press Ctrl-Shift-P to open the command palette and type Material Icons.

Command	Description
Activate Icon Theme	Activate the icon theme.
Change File Color	Change the color of the file icons.
Change Folder Color	Change the color of the folder icons.
Change Folder Theme	Change the design of the folder icons.
Change Opacity	Change the opacity of the icons.
Change Saturation	Change the saturation value of the icons.
Configure Icon Packs	Selects an icon pack that enables additional icons (e.g. for Angular, React, Ngrx).
Toggle Explorer Arrows	Show or hide the arrows next to the folder icons.
Restore Default Configuration	Reset to the default configuration.
Toggle Grayscale	Set icon saturation to `0` (grayscale), or `1` (color).