CODEWITHSUNDEEP
visual-studio-codevscode-extensions
Stefan Stoychev
Stefan Stoychev

Reputation: 4987

vscode extension iconPath

I'm working on VSCode extension that uses WebView to show additional data. I works fine apart from the webview icon.

If nothing is specified the icon is:

Default icon

I was reading the documentation and noticed that WebView allow iconPath option with the following format:

iconPath format

I've tried to add the icon using the following code:

const onDiskPath = vscode.Uri.file(
    path.join(context.extensionPath, 'resources', 'my-icon.svg')
);

panel.iconPath = panel.webview.asWebviewUri(onDiskPath);

But I'm getting an error:

Refused to load the image 'vscode-resource://file///f:/dev/my-extension/resources/my-icon.svg' because it violates the following Content Security Policy directive: "img-src 'self' https: data: blob: vscode-remote-resource:".

In the webview html the following content policy is avaialble:

<meta http-equiv="Content-Security-Policy" 
        content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}';">

(i've tried messing with the content policies but nothing has changed. The same error is shown)

Is there a problem with the content policy or the way the icon path is generated? (or its something completely different :) )

Upvotes: 5

Views: 2564

Answers (2)

deammer
deammer

Reputation: 229

I wanted to provide some examples on top of Gama11's response.

The panel.iconPath takes a vscode.Uri. For example, if you have a /resources directory at the root of your extension with an icon called icon.svg, you could set it as the webview's icon like so:

panel.iconPath = vscode.Uri.joinPath(context.extensionUri, "resources", "icon.svg");

You can also provide a dark and light version of the icon. Here's another example with 2 icons in a /resources directory:

panel.iconPath = {
  dark: vscode.Uri.joinPath(context.extensionUri, "resources", "icon-dark.svg"),
  light: vscode.Uri.joinPath(context.extensionUri, "resources", "icon-light.svg"),
};

Upvotes: 4

Gama11
Gama11

Reputation: 34138

I think you misunderstand what a "webview URI" is for - it's for resources used within the webview. For iconPath you want a regular file URI, so it should be as simple as:

panel.iconPath = onDiskPath;

Upvotes: 4

Related Questions