Material Icon Theme

Material Icon Theme provides Material Design file and folder icons for Visual Studio Code with the following capabilities:

• Customization: Adjust colors, opacity, and saturation.
• Theming: Support for icon packs and various themes.
• Associations: Create custom icon associations and clones.
• Maintenance: Actively maintained with a modern codebase.

To use the Material Design icons from the VS Code Material Icon Theme in your web projects, install the material-icon-theme package via npm.

npm install material-icon-theme

To use Material Design icons in Visual Studio Code, follow these steps:

1. Install the extension from the VS Code Marketplace.
2. Activate the icon theme by opening the command palette (Ctrl+Shift+P or Cmd+Shift+P on macOS), typing Material Icons: Activate Icon Theme, and selecting it.

Once activated, your editor will display Material Design icons for files and folders.

You can assign specific icons to the workspace root folder and customize their color.

• Associations: Use material-icon-theme.rootFolders.associations to map a root folder name to an icon.
• Color: Use material-icon-theme.rootFolders.color to set a hex color for root icons.

"material-icon-theme.rootFolders.associations": {
  "backend": "server"
},
"material-icon-theme.rootFolders.color": "#F4511E"

You can map specific file names or extensions to specific icons using material-icon-theme.files.associations.

• Extension pattern: Use *.[extension] (e.g., *.ts).
• Overwrite specific icons: Use **.[extension] to ensure the icon applies even if a specific filename would normally trigger a different icon.
• Filename pattern: If the pattern does not start with *, it is treated as a specific filename.
• Custom SVGs: You can point to a custom SVG file located within the .vscode/extensions directory. The path must be relative to the extension's dist folder and must not include the .svg extension in the setting.

"material-icon-theme.files.associations": {
    "*.ts": "typescript",
    "**.json": "json",
    "fileName.ts": "angular",
    "fileName.ts": "../../icons/sample"
}

You can control the visual weight of icons by adjusting their opacity and color saturation.

• Opacity: Set material-icon-theme.opacity to a value between 0 and 1.
• Saturation: Set material-icon-theme.saturation to a value between 0 and 1. Setting it to 0 makes icons grayscale. You can also use the Toggle Grayscale command to achieve a grayscale look.

Customize icons for specific languages using material-icon-theme.languages.associations. Use valid VS Code language identifiers as keys.

Custom Language Icon Clones: Use material-icon-theme.languages.customClones to create variations of language icons.

• ids: An array of language IDs to associate with the clone.

"material-icon-theme.languages.associations": {
  "languageId": "iconName"
},
"material-icon-theme.languages.customClones": [
  {
    "name": "ahk-clone",
    "base": "autohotkey",
    "color": "blue-400",
    "lightColor": "grey-600",
    "ids": ["ahk2"]
  }
]

Clone existing folder icons using material-icon-theme.folders.customClones.

Properties:

• name: Unique name for the clone.
• base: The existing folder icon to clone.
• color: Color (Hex or Material Palette alias).
• lightColor: (Optional) Color for light themes.
• folderNames: Array of folder names to associate.
• rootFolderNames: (Optional) Array of folder names that, when at the workspace root, trigger this icon.

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

You can change the design style of folder icons using the Command Palette or by setting the material-icon-theme.folders.theme key in your user settings.

"material-icon-theme.folders.theme": "specific"

Map folder names to specific icons using material-icon-theme.folders.associations.

Custom SVG Folder Icons: To use custom SVGs for folders, you must provide two files: one for the closed state and one for the open state (e.g., folder-sample.svg and folder-sample-open.svg). These must be placed in a directory within .vscode/extensions. The association path should be relative to the extension's dist folder and should not include the .svg extension.

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