CODEWITHSUNDEEP
visual-studio-codevscode-extensions
aljazsim
aljazsim

Reputation: 404

Using default VS Code icons on an extension

I am making a VS Code extension for outlining TypeScript code structure. I am wondering how can I use the same icons VS Code uses in intellisense in my custom tree view:

enter image description here

Upvotes: 6

Views: 3684

Answers (3)

BoH
BoH

Reputation: 1129

To use an available icon for a file that the icon same as what you see in the Explorer view, it's possible.

This is an example

getTreeItem(element: string): vscode.TreeItem | Thenable<vscode.TreeItem> {
  let treeItem = new vscode.TreeItem("MyFile.graphql", vscode.TreeItemCollapsibleState.None);
  let filePath = path.join(this.currentDirectory, "MyFile.graphql");
  let fileUri = vscode.Uri.file(filePath);

  // set the file uri, and expected icon will appear
  treeItem.resourceUri = fileUri;
  return treeItem;
}

Just make sure the file is available and file uri is correct.

Upvotes: 0

Alessandro Benassi
Alessandro Benassi

Reputation: 1939

Update 2022:

It is now possible to use codicons in a tree item:

getChildren() {
    return [
        {
            collapsibleState: vscode.TreeItemCollapsibleState.None,
            label: 'label',
            // Replace 'circle-outline' with desired codicon: https://microsoft.github.io/vscode-codicons/dist/codicon.html
            iconPath: new vscode.ThemeIcon('circle-outline'),
        }
    ];
}

Upvotes: 5

Gama11
Gama11

Reputation: 34158

I don't think there's any way to reference built-in icons, so you would have to include copies of these in your extension. This is what the vscode-code-outline extension does (along with many others). There's a relevant feature request here:

[icons] Support to allow re-using VSCode icons in user extensions (#31466)

There's a nice overview of all built-in document symbol / suggest icons here. The .svg assets can be found here:

Upvotes: 2

Related Questions