1

I would like to use one of those built-in Icons at https://code.visualstudio.com/api/references/icons-in-labels

package.json

...
  "contributes": {
    "languages": [{
      ...
      "icon": {
        "dark": "$(account)",
        "light": "$(account)"
    }
    ...
...

Results in no icon at all:

no icon

I also tried account, $(accounts-view-bar-icon) and accounts-view-bar-icon. All those different syntaxes and ID's are not working.

Mike Lischke
  • 48,925
  • 16
  • 119
  • 181

1 Answers1

0

Found a solution but not sure if that is the correct way.

  • Install the Codicons ( https://github.com/microsoft/vscode-codicons ) to the extension via npm i @vscode/codicons
  • Copy the icons you want to use from ./node_modules/@vscode/codicons/src/icons to ./src/icons
  • Copy them one for dark and one for light
  • Use the icons in the package.json file like:
 "icon": {
  "dark": "./src/icons/dark/account.svg",
  "light": "./src/icons/light/account.svg"
}
  • Change the colors in the .svg files at ./icons/dark/account.svg and ./icons/light/account.svg:
<svg
  width="16"
  height="16"
  viewBox="0 0 16 16"
  xmlns="http://www.w3.org/2000/svg"
  fill="#478af5"> ...

<svg
  width="16"
  height="16"
  viewBox="0 0 16 16"
  xmlns="http://www.w3.org/2000/svg"
  fill="#1f2b40"> ...

Note on color changes for Icons

If you change the color of an icon afterwards, change the name of the used icon in the package.json to any other value, package your Extension, change it back to the origin icon name and package again. Otherwise the color changes will not take place in VSCode. Seems it will be cached.