skip to Main Content

I am creating an extension for vscode and i am trying to change the icon displayed near the tree view.

I have seen this documentation but it is not very detailed.

I have also tried to do what is discussed in this post but it has not worked for me. There you have the code of my package.json:

 "views": {
      "my-sidebar": [
        {
          "id": "my-history-tree",
          "name": "History",
          "contextualTitle": "History",
          "type": "tree",
          "icon": "$(briefcase)"
        }
      ]
    },

I’ve also looked at some examples that vscode provides, but couldn’t find any. I only found this one that uses an SVG directly.

So how can I use vscode’s built-in icons without having to install any dependencies?

2

Answers


  1. Chosen as BEST ANSWER

    The vscode documentation is grossly incomplete. Apparently the "icon" configuration that is in the views of the "views" section is not to change the icon. But if you drag the view to another place (such as the activity bar) where the title cannot be displayed, then that icon is displayed. But the icon that appears next to the view, cannot be changed.


  2. You can’t use octicons as icons for Activity Bars and/or Views. Instead, you must use image files, and SVGs are the suggested format.

    If you hover the icon property in the package.json file, you will see this hint:

    Path to the view icon. View icons are displayed when the name of the view cannot be shown. It is recommended that icons be in SVG, though any image file type is accepted.

    A similar hint is displayed when you hover the icon message for the activityBar:

    Path to the container icon. Icons are 24×24 centered on a 50×40 block and have a fill color of ‘rgb(215, 218, 224)’ or ‘#d7dae0’. It is recommended that icons be in SVG, though any image file type is accepted.

    Hope this helps

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search