Vscode: Support codicons in webview

[jrieken]

Just like we support to use all theme colors in webview, we should support the use of codicons inside webviews. This will help with issues like https://github.com/microsoft/vscode-github-issue-notebooks/issues/15 or https://github.com/microsoft/vscode-github-issue-notebooks/issues/7

[mjbvz]

How would you expect this to work in terms of API? Just let webviews to use codicon-ellipsis class names, for example?

[misolori]

Either that way or having a way to using some type of syntax like our icon label, $(icon name).

[jrieken]

Yeah, I think using the classnames is the simplest.

[jrieken]

And pretty please for not backlog'ing this because this enables a nicer GH notebooks extension that is likely to catch more attention soon.

[mjbvz]

@misolori Would including https://github.com/microsoft/vscode/blob/e14cf0ff92f022d20f00bdd5b9e173af3f108a87/src/vs/base/browser/ui/codiconLabel/codicon/codicon.css in webviews give developers what they need? I don't know how stuff like icon sizing works for example

[misolori]

@mjbvz yep, in addition to that i'd include the other css modification files under https://github.com/microsoft/vscode/tree/master/src/vs/base/browser/ui/codiconLabel/codicon. The main codicon.css file should have the proper icon sizing. Once those are available in the webview all you need to do is reference an icon like <span class="codicon codicon-rocket"></span>" and that should do it.

[piersdeseilligny]

In the meantime of an API being introduced, is there currently a hacky way of including these icons in a webview?

[misolori]

@piersdeseilligny you can use the npm package in the meantime and reference the css classes directly

[banacorn]

For posterity, here's how to reference the CSS.

<link rel="stylesheet" type="text/css" href="/path/to/codicon.css">

And here's the additional CSP for font-src:

<meta http-equiv="Content-Security-Policy" content="font-src vscode-resource: ; ... ">

[mjbvz]

Just a quick note: make sure to use Webview.asWebviewUri to get the path to the font file and Webview.cspSource to get the the csp rule (instead of hardcoding vscode-resource:). That way your extension should work in as many environments as possible

[misolori]

Thanks to @mjbvz's help, we now have a sample webview that uses codicons from the npm package for others to reference.

[banacorn]

Just a quick note: make sure to use Webview.asWebviewUri to get the path to the font file and Webview.cspSource to get the the csp rule (instead of hardcoding vscode-resource:). That way your extension should work in as many environments as possible

@mjbvz thanks! Would you mind elaborate a bit more. Maybe with some concrete examples?

[misolori]

@banacorn if you take a look at the sample webview from above you can see an example:

asWebviewUri
https://github.com/microsoft/vscode-extension-samples/blob/22d5639ff5c1d88f144c057fc3d29cc9dfd99d62/webview-codicons-sample/src/extension.ts#L34

CSP
https://github.com/microsoft/vscode-extension-samples/blob/22d5639ff5c1d88f144c057fc3d29cc9dfd99d62/webview-codicons-sample/src/extension.ts#L46

[mjbvz]

This extension sample demonstrates using Codicons in a webview: https://github.com/microsoft/vscode-extension-samples/tree/master/webview-codicons-sample

Closing this as leaving codicons up to extensions seems like the best approach for now. We may revisit letting webview load VS Code's bundled codices at some point in the future