adding a language-specific icon in vscode

Question

I've created a language extension (syntax highlighting, etc) and now want to associated a specific icon with the language (or files with the extensions specified in my extension).

I noticed an "icon" property is available in the package.json file, and tried to bind this property to my .svg file. But while syntax highlighting works just fine on a test file, I don't see my custom icon associated with this file.

Where do I add a reference to my .svg file? Do I have to somehow contribute my .svg file to the Seti File Icon Theme?

Answer 1

File and folder icons are defined in icon sets, the default set being Seti. There is indeed currently no way to re-define those icons in an extension, short of creating your own icon theme. The Seti UI icons are generated from a dependency to the main repo and shipped as a built-in extension.

Therefore, your best bet to get your syntax icon included in VScode is submitting a pull request to the Seti UI repository. At some point, the new icons will be rolled into an icon font by the VScode developers and your icons should appear.

Answer 2

In vscode v1.64:

Language default icons

Language contributors can define an icon for the language.

 "contributes": {  
     "languages": [
       {
         "id": "latex",
         // ...
         "icon": {
           "light": "./icons/latex-light.png",
           "dark": "./icons/latex-dark.png"
         }
       }
   ] 

The icon is shown if the current file icon theme only has a generic file icon for the language.

File icon themes like Minimal or None that do not show file icons also will not use the language icon. Also, if a file icon theme has an icon for an extension or file name, these will be preferred.

File icon themes can customize the new behavior by defining showLanguageModeIcons: true|false in the theme file.

showLanguageModeIcons: true shows the default language icons even if the theme does not specify a file icon
showLanguageModeIcons: false prevents that default language icons are used.

• https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_64.md#language-default-icons