CODEWITHSUNDEEP
visual-studio-codeiconsvscode-extensions
W. Goeman
W. Goeman

Reputation: 1714

How to use VSCode product icon for command in extension

I am trying to add a button to the 'editor/title' section which runs my command. With my current configuration, my command name appears when unfolding the menu by clicking the 3 buttons. What I want is to have an icon presented (like for the split editor button), which runs my command.

From the documentation I found that it should be possible to supply an svg file for the icon, but I prefer to use an icon from the product icons. This way the icon can change along with the theme.

Is that even possible, or am I just configuring it incorrectly?

This is the config I have so far:

"contributes": {
    "commands": [
        {
            "command": "my-extension.my-command"
            "title": "My Command",
            "icon": "preview" // <-- this refers to the icon from 'product icons'
        }
    ],
    "menus": {
        "editor/title": [
            {
                "when": "resourceExtname == .xyz",
                "command": "my-extension.my-command"
            }
        ]
    }
}

Upvotes: 3

Views: 2012

Answers (1)

Shalom Peles
Shalom Peles

Reputation: 2632

This should works:

"contributes": {
    "commands": [
        {
            "command": "my-extension.my-command"
            "title": "My Command",
            "icon": "$(preview)" // <-- the syntax for using a 'product icon' is $(iconIdentifier)
        }
    ],
}

Upvotes: 10

Related Questions