-
Notifications
You must be signed in to change notification settings - Fork 129
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How do you use icon buttons? The code examples don't work. #541
Comments
Thanks for calling this out, this is definitely long overdue for some more extensive documentation 😅 To give some context, the doc code snippets demonstrate usage of the Codicons icon library (a library that is created/managed independently of this one). We historically didn't document how to install/setup Codicons because it has it's own documentation/samples for configuring the icons within a webview and is one of any number of icon libraries that can be used in a webview extension. Generally using an icon library in a webview falls under the umbrella of loading local content into a webview which is also documented separately in the VS Code API docs. But like I said, we're long overdue for offering a bit more guidance/direction to folks in our docs. I'll take this issue as a task to update our docs, but to immediately unblock you, you can configure Codicons by:
I hope that all makes sense (tried my best to be succinct and clear), but if you have any questions or run into issues let me know and I'm happy to clarify! |
Thanks for those steps! I did get things working in a pretty acceptable way, but I hit some other speed bumps that might be good to document:
In the end my code looked like this: // The Chromium version in VS Code does not support the `with` keyword yet
import codiconStyles from '@vscode/codicons/dist/codicon.css' assert {type: 'css'};
// @font-face doesn't work in shadow roots! So we have to inject the styles into
// the main document.
document.adoptedStyleSheets.push(codiconStyles);
@customElement('x-foo')
export class XFoo extends LitElement {
static styles = [
codiconStyles,
css`...`
]; And I needed to mark |
Describe the bug
Icons do not show up for
appearance="icon"
buttons with the examples given on the button component docs:There appears to be no instructions on getting the
<span class="codicon codicon-check"></span>
bit to work.To reproduce
Paste the example snippet into a webview where
<vscode-button>
is defined.Expected behavior
The button shows an icon.
Current behavior
The button doesn't show an icon:
Screenshots
Desktop (please complete the following information):
macOS 14.3.1
v1.4.0
Additional context
The text was updated successfully, but these errors were encountered: