Icon
To use the icons, the codicons.css file must be included in the page:
<link rel="stylesheet" href="path/to/codicon.css" id="vscode-codicon-stylesheet">
Note the required id
on the link element!
To use web fonts in web components, the component needs to include
the font stylesheet in addition to the page. This id serves as a lookup so
the icon component can automatically create and insert it’s own link tag.
Basic example
Section titled “Basic example”<!-- Download codicons from https://github.com/microsoft/vscode-codicons
Note the required `id` on the link element! To use web fonts in web components, the component needs to include the font stylesheet in addition to the page. This id serves as a lookup so the icon component can automatically create and insert it's own link tag.--><link rel="stylesheet" href="path/to/codicon.css" id="vscode-codicon-stylesheet"/>
<vscode-icon name="account"></vscode-icon><vscode-icon name="account" size="32"></vscode-icon><vscode-icon name="account" size="48"></vscode-icon><vscode-icon name="account" size="64"></vscode-icon>
Action icons
Section titled “Action icons”<vscode-icon name="account" action-icon></vscode-icon><vscode-icon name="add" action-icon></vscode-icon><vscode-icon name="git-compare" action-icon></vscode-icon>
Animated icons
Section titled “Animated icons”<vscode-icon name="loading" spin spin-duration="1"></vscode-icon><vscode-icon name="sync" spin></vscode-icon><vscode-icon name="gear" spin spin-duration="2"></vscode-icon>
List of icons
Section titled “List of icons”For the searchable list, see the project page.