Available on the VSCode Marketplace
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Updated version Apr 9, 2018
icons Updated 3D icon (References #363) Jan 17, 2019
images Release 3.6.2 Dec 20, 2018
scripts Release 3.6.2 Dec 20, 2018
src Merge branch 'master' of https://github.com/PKief/vscode-material-ico… Jan 17, 2019
test Rearranged imports Apr 22, 2018
.gitignore added command to change folder color Nov 7, 2017
.travis.yml updated ci configs Nov 12, 2017
.vscodeignore Removed bithound config file Aug 19, 2018
CHANGELOG.md Release 3.6.2 Dec 20, 2018
CONTRIBUTING.md updated contributing instructions Oct 22, 2017
LICENSE.md Updated year in license Jan 6, 2018
README.md Release 3.5.0 May 31, 2018
appveyor.yml Updated version and changelog Jan 4, 2018
logo.png get ready to publish Aug 7, 2017
logo.svg get ready to publish Aug 7, 2017
package-lock.json Release 3.6.2 Dec 20, 2018
package.json Release 3.6.2 Dec 20, 2018
package.nls.de.json Adapting the extension to the new Settings GUI Sep 10, 2018
package.nls.es.json Adapting the extension to the new Settings GUI Sep 10, 2018
package.nls.fr.json Adapting the extension to the new Settings GUI Sep 10, 2018
package.nls.json Adapting the extension to the new Settings GUI Sep 10, 2018
package.nls.pt-BR.json Adapting the extension to the new Settings GUI Sep 10, 2018
package.nls.pt-PT.json Adapting the extension to the new Settings GUI Sep 10, 2018
package.nls.ru.json Adapting the extension to the new Settings GUI Sep 10, 2018
package.nls.zh-CN.json Adapting the extension to the new Settings GUI Sep 10, 2018
tsconfig.json Improved code quality Sep 9, 2018
tslint.json Updated tslint rules Mar 14, 2018

README.md

Material Icon Theme

Version Rating Installs Build Status

The Material Icon Theme provides lots of icons based on Material Design for Visual Studio Code.

File icons

file icons

Folder icons

folder icons

Customize folder color

You can change the color of the default folder icon using the command palette:

custom folder colors

or via user settings:

"material-icon-theme.folders.color": "#ef5350",

Folder themes

You can change the design of the folder icons using the command palette:

folder themes

or via user settings:

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

Custom icon opacity

You can set a custom opacity for the icons:

"material-icon-theme.opacity": 0.5

Custom icon associations

You can customize the icon associations directly in the user settings.

File associations

With the *.[extension] pattern you can define custom file icon associations. For example you could define an icon for *.sample and every file that ends with .sample will have the defined icon. Use **.[extension] with two asterisks to apply the file association also for the filenames ending with that file extension.

If there's no leading * it will be automatically configured as filename and not as file extension.

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

Folder associations

The following configuration can customize the folder icons. It is also possible to overwrite existing associations and create nice combinations. For example you could change the folder theme to "classic" and define icons only for the folder names you like.

"material-icon-theme.folders.associations": {
    "customFolderName": "src",
    "sample": "dist"
}

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

Available language ids:

https://code.visualstudio.com/docs/languages/identifiers#_known-language-identifiers

You can see the available icon names in the overview above.

One-click activation

After installation or update you can click on the 'Activate'-button to activate the icon theme, if you haven't already. The icons will be visible immediately.

activation

Commands

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

commands

  • Activate Icon Theme: Activate the icon theme.

  • 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.

  • Configure Icon Packs: Select an icon pack that enables additional icons (e.g. for Angular, React, Ngrx).

  • Hide Folder Arrows: Hides the arrows next to the folder icons.

  • Restore Default Configuration: Reset the default configurations of the icon theme.

Icon sources

How to contribute

Read the contribution guidelines.

If you have some questions or icon requests open a new issue on Github.

Follow me