javascript - How to set the custom icons & logos in the status bar (setStatusBarMessage) of vscode extension? - Stack Ov

I am developing a vs-code extension in which i want set the icons in the status bar but i am facing issue.

import * as vscode from 'vscode';
...
export function activate(context: vscode.ExtensionContext) {
    ...

    let disposable = vscodemands.registerCommand('extension.helloWorld', () => { 
            ....
            //on the place of icon i want the icon to get display in the status bar
                  vscode.window.setStatusBarMessage(
                    "icon "+" icon "+  
                    data1 +
                    " icon " +
                    data2 +
                    " icon" +
                    data3
                  );
                  ...
                  ...
});
...
}

export function deactivate() {}

I am developing a vs-code extension in which i want set the icons in the status bar but i am facing issue.

import * as vscode from 'vscode';
...
export function activate(context: vscode.ExtensionContext) {
    ...

    let disposable = vscode.mands.registerCommand('extension.helloWorld', () => { 
            ....
            //on the place of icon i want the icon to get display in the status bar
                  vscode.window.setStatusBarMessage(
                    "icon "+" icon "+  
                    data1 +
                    " icon " +
                    data2 +
                    " icon" +
                    data3
                  );
                  ...
                  ...
});
...
}

export function deactivate() {}

• javascript
• typescript
• visual-studio-code
• vscode-extensions

Share Improve this question Follow edited Dec 3, 2019 at 18:23 majid beg asked Dec 3, 2019 at 16:44 majid begmajid beg 19644 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Yes, you can add an icon to Status Bar. First, you need to convert your icon svg to the font (you can use tool like iconmo) then add it in package.json. The API here: (https://code.visualstudio./api/references/contribution-points#contributes.icons)

Example:

"contributes": {
    "icons": {
      "skedulo-logo": {
        "description": "Skedulo icon",
        "default": {
          "fontPath": "media/skedulo.woff",
          "fontCharacter": "\\e900"
        }
      }
    }
  }
}

Then in your status bar:

this.statusBar = vscode.window.createStatusBarItem(
      vscode.StatusBarAlignment.Left,
      100
    );

this.statusBar.text = `$(skedulo-logo)`;

You can ref to some extensions like Graphql: https://github./graphql/graphiql/blob/main/packages/vscode-graphql/package.json

You can find a list of available icons here (custom icons are not supported):

https://code.visualstudio./api/references/icons-in-labels

They are used via $(icon-name) syntax, for instance $(alert) which will produce .