From 03ac8eca45d0f1c642eb5e7589bf9db12ff3114e Mon Sep 17 00:00:00 2001
From: Keith Daulton <kdaulton@d13design.com>
Date: Mon, 31 Oct 2022 17:17:44 -0400
Subject: [PATCH] updates codicon component to FAST

---
 src/webviews/apps/commitDetails/commitDetails.html |    2 +-
 src/webviews/apps/commitDetails/commitDetails.ts   |    4 +-
 src/webviews/apps/home/components/card-section.ts  |    2 +-
 src/webviews/apps/home/components/header-card.ts   |    2 +-
 src/webviews/apps/home/components/plus-content.ts  |    2 +-
 .../apps/home/components/stepped-section.ts        |    2 +-
 src/webviews/apps/home/home.ts                     |    2 +-
 .../apps/shared/components/actions/action-nav.ts   |    2 +-
 src/webviews/apps/shared/components/code-icon.ts   | 1532 +++++++++++++++++++
 src/webviews/apps/shared/components/codicon.ts     | 1537 --------------------
 .../apps/shared/components/commit/commit-stats.ts  |    2 +-
 .../shared/components/commit/file-change-item.ts   |    2 +-
 .../components/list/file-change-list-item.ts       |    2 +-
 .../apps/shared/components/list/list-item.ts       |    2 +-
 .../shared/components/rich/issue-pull-request.ts   |    2 +-
 .../apps/shared/components/search/search-box.ts    |    2 +-
 .../apps/shared/components/search/search-input.ts  |    2 +-
 .../apps/shared/components/webview-pane.ts         |    2 +-
 18 files changed, 1549 insertions(+), 1554 deletions(-)
 create mode 100644 src/webviews/apps/shared/components/code-icon.ts
 delete mode 100644 src/webviews/apps/shared/components/codicon.ts

diff --git a/src/webviews/apps/commitDetails/commitDetails.html b/src/webviews/apps/commitDetails/commitDetails.html
index f6b4516..037a98f 100644
--- a/src/webviews/apps/commitDetails/commitDetails.html
+++ b/src/webviews/apps/commitDetails/commitDetails.html
@@ -139,7 +139,7 @@
 							data-action-type="graph"
 							aria-label="Open in Commit Graph"
 							title="Open in Commit Graph"
-							><code-icon icon="graph"></code-icon
+							><code-icon icon="gl-graph"></code-icon
 						></a>
 						<a
 							class="commit-details__commit-action"
diff --git a/src/webviews/apps/commitDetails/commitDetails.ts b/src/webviews/apps/commitDetails/commitDetails.ts
index 5ac3da3..e4da524 100644
--- a/src/webviews/apps/commitDetails/commitDetails.ts
+++ b/src/webviews/apps/commitDetails/commitDetails.ts
@@ -25,7 +25,7 @@ import type { FileChangeListItem, FileChangeListItemDetail } from '../shared/com
 import type { WebviewPane, WebviewPaneExpandedChangeEventDetail } from '../shared/components/webview-pane';
 import { DOM } from '../shared/dom';
 import './commitDetails.scss';
-import '../shared/components/codicon';
+import '../shared/components/code-icon';
 import '../shared/components/commit/commit-identity';
 import '../shared/components/formatted-date';
 import '../shared/components/rich/issue-pull-request';
@@ -273,7 +273,7 @@ export class CommitDetailsApp extends App<Serialized<State>> {
 		$el.classList.toggle('is-active', state.pinned);
 
 		const $icon = $el.querySelector('[data-region="commit-pin"]');
-		$icon?.setAttribute('icon', state.pinned ? 'pinned-filled' : 'pin');
+		$icon?.setAttribute('icon', state.pinned ? 'gl-pinned-filled' : 'pin');
 	}
 
 	renderSha(state: CommitState) {
diff --git a/src/webviews/apps/home/components/card-section.ts b/src/webviews/apps/home/components/card-section.ts
index 0150420..5206ca4 100644
--- a/src/webviews/apps/home/components/card-section.ts
+++ b/src/webviews/apps/home/components/card-section.ts
@@ -1,6 +1,6 @@
 import { attr, css, customElement, FASTElement, html, when } from '@microsoft/fast-element';
 import { numberConverter } from '../../shared/components/converters/number-converter';
-import '../../shared/components/codicon';
+import '../../shared/components/code-icon';
 
 const template = html<CardSection>`<template role="region">
 	${when(
diff --git a/src/webviews/apps/home/components/header-card.ts b/src/webviews/apps/home/components/header-card.ts
index 9629d9d..de7fb62 100644
--- a/src/webviews/apps/home/components/header-card.ts
+++ b/src/webviews/apps/home/components/header-card.ts
@@ -2,7 +2,7 @@ import { attr, css, customElement, FASTElement, html, ref, volatile, when } from
 import { SubscriptionState } from '../../../../subscription';
 import { pluralize } from '../../../../system/string';
 import { numberConverter } from '../../shared/components/converters/number-converter';
-import '../../shared/components/codicon';
+import '../../shared/components/code-icon';
 
 const template = html<HeaderCard>`
 	<div class="header-card__media"><img class="header-card__image" src="${x => x.image}" alt="GitLens Logo" /></div>
diff --git a/src/webviews/apps/home/components/plus-content.ts b/src/webviews/apps/home/components/plus-content.ts
index e8fbe4b..2c5263a 100644
--- a/src/webviews/apps/home/components/plus-content.ts
+++ b/src/webviews/apps/home/components/plus-content.ts
@@ -2,7 +2,7 @@ import { attr, css, customElement, FASTElement, html, volatile, when } from '@mi
 import { SubscriptionState } from '../../../../subscription';
 import { pluralize } from '../../../../system/string';
 import { numberConverter } from '../../shared/components/converters/number-converter';
-import '../../shared/components/codicon';
+import '../../shared/components/code-icon';
 
 const template = html<PlusContent>`
 	${when(
diff --git a/src/webviews/apps/home/components/stepped-section.ts b/src/webviews/apps/home/components/stepped-section.ts
index 5d722c9..bd9acb0 100644
--- a/src/webviews/apps/home/components/stepped-section.ts
+++ b/src/webviews/apps/home/components/stepped-section.ts
@@ -1,6 +1,6 @@
 import { attr, css, customElement, FASTElement, html } from '@microsoft/fast-element';
 import { numberConverter } from '../../shared/components/converters/number-converter';
-import '../../shared/components/codicon';
+import '../../shared/components/code-icon';
 
 const template = html<SteppedSection>`<template role="region">
 	<header class="heading" role="heading" aria-level="${x => x.headingLevel}">
diff --git a/src/webviews/apps/home/home.ts b/src/webviews/apps/home/home.ts
index 7004cec..6ffda1d 100644
--- a/src/webviews/apps/home/home.ts
+++ b/src/webviews/apps/home/home.ts
@@ -17,7 +17,7 @@ import { DOM } from '../shared/dom';
 import type { CardSection } from './components/card-section';
 import type { PlusContent } from './components/plus-content';
 import type { SteppedSection } from './components/stepped-section';
-import '../shared/components/codicon';
+import '../shared/components/code-icon';
 import './components/card-section';
 import './components/stepped-section';
 import './components/plus-content';
diff --git a/src/webviews/apps/shared/components/actions/action-nav.ts b/src/webviews/apps/shared/components/actions/action-nav.ts
index 482ce67..4b2c633 100644
--- a/src/webviews/apps/shared/components/actions/action-nav.ts
+++ b/src/webviews/apps/shared/components/actions/action-nav.ts
@@ -1,5 +1,5 @@
 import { css, customElement, FASTElement, html, observable, slotted } from '@microsoft/fast-element';
-import '../codicon';
+import '../code-icon';
 
 const template = html<ActionNav>`<template role="navigation"><slot ${slotted('actionNodes')}></slot></template>`;
 
diff --git a/src/webviews/apps/shared/components/code-icon.ts b/src/webviews/apps/shared/components/code-icon.ts
new file mode 100644
index 0000000..798c4d2
--- /dev/null
+++ b/src/webviews/apps/shared/components/code-icon.ts
@@ -0,0 +1,1532 @@
+import { attr, css, customElement, FASTElement } from '@microsoft/fast-element';
+
+const styles = css`
+	:host {
+		font: normal normal normal 16px/1 codicon;
+		display: inline-block;
+		text-decoration: none;
+		text-rendering: auto;
+		text-align: center;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+		color: inherit;
+		vertical-align: text-bottom;
+		letter-spacing: normal;
+	}
+
+	:host([icon='add']):before {
+		content: '\\ea60';
+	}
+	:host([icon='plus']):before {
+		content: '\\ea60';
+	}
+	:host([icon='gist-new']):before {
+		content: '\\ea60';
+	}
+	:host([icon='repo-create']):before {
+		content: '\\ea60';
+	}
+	:host([icon='lightbulb']):before {
+		content: '\\ea61';
+	}
+	:host([icon='light-bulb']):before {
+		content: '\\ea61';
+	}
+	:host([icon='repo']):before {
+		content: '\\ea62';
+	}
+	:host([icon='repo-delete']):before {
+		content: '\\ea62';
+	}
+	:host([icon='gist-fork']):before {
+		content: '\\ea63';
+	}
+	:host([icon='repo-forked']):before {
+		content: '\\ea63';
+	}
+	:host([icon='git-pull-request']):before {
+		content: '\\ea64';
+	}
+	:host([icon='git-pull-request-abandoned']):before {
+		content: '\\ea64';
+	}
+	:host([icon='record-keys']):before {
+		content: '\\ea65';
+	}
+	:host([icon='keyboard']):before {
+		content: '\\ea65';
+	}
+	:host([icon='tag']):before {
+		content: '\\ea66';
+	}
+	:host([icon='tag-add']):before {
+		content: '\\ea66';
+	}
+	:host([icon='tag-remove']):before {
+		content: '\\ea66';
+	}
+	:host([icon='person']):before {
+		content: '\\ea67';
+	}
+	:host([icon='person-follow']):before {
+		content: '\\ea67';
+	}
+	:host([icon='person-outline']):before {
+		content: '\\ea67';
+	}
+	:host([icon='person-filled']):before {
+		content: '\\ea67';
+	}
+	:host([icon='git-branch']):before {
+		content: '\\ea68';
+	}
+	:host([icon='git-branch-create']):before {
+		content: '\\ea68';
+	}
+	:host([icon='git-branch-delete']):before {
+		content: '\\ea68';
+	}
+	:host([icon='source-control']):before {
+		content: '\\ea68';
+	}
+	:host([icon='mirror']):before {
+		content: '\\ea69';
+	}
+	:host([icon='mirror-public']):before {
+		content: '\\ea69';
+	}
+	:host([icon='star']):before {
+		content: '\\ea6a';
+	}
+	:host([icon='star-add']):before {
+		content: '\\ea6a';
+	}
+	:host([icon='star-delete']):before {
+		content: '\\ea6a';
+	}
+	:host([icon='star-empty']):before {
+		content: '\\ea6a';
+	}
+	:host([icon='comment']):before {
+		content: '\\ea6b';
+	}
+	:host([icon='comment-add']):before {
+		content: '\\ea6b';
+	}
+	:host([icon='alert']):before {
+		content: '\\ea6c';
+	}
+	:host([icon='warning']):before {
+		content: '\\ea6c';
+	}
+	:host([icon='search']):before {
+		content: '\\ea6d';
+	}
+	:host([icon='search-save']):before {
+		content: '\\ea6d';
+	}
+	:host([icon='log-out']):before {
+		content: '\\ea6e';
+	}
+	:host([icon='sign-out']):before {
+		content: '\\ea6e';
+	}
+	:host([icon='log-in']):before {
+		content: '\\ea6f';
+	}
+	:host([icon='sign-in']):before {
+		content: '\\ea6f';
+	}
+	:host([icon='eye']):before {
+		content: '\\ea70';
+	}
+	:host([icon='eye-unwatch']):before {
+		content: '\\ea70';
+	}
+	:host([icon='eye-watch']):before {
+		content: '\\ea70';
+	}
+	:host([icon='circle-filled']):before {
+		content: '\\ea71';
+	}
+	:host([icon='primitive-dot']):before {
+		content: '\\ea71';
+	}
+	:host([icon='close-dirty']):before {
+		content: '\\ea71';
+	}
+	:host([icon='debug-breakpoint']):before {
+		content: '\\ea71';
+	}
+	:host([icon='debug-breakpoint-disabled']):before {
+		content: '\\ea71';
+	}
+	:host([icon='debug-hint']):before {
+		content: '\\ea71';
+	}
+	:host([icon='primitive-square']):before {
+		content: '\\ea72';
+	}
+	:host([icon='edit']):before {
+		content: '\\ea73';
+	}
+	:host([icon='pencil']):before {
+		content: '\\ea73';
+	}
+	:host([icon='info']):before {
+		content: '\\ea74';
+	}
+	:host([icon='issue-opened']):before {
+		content: '\\ea74';
+	}
+	:host([icon='gist-private']):before {
+		content: '\\ea75';
+	}
+	:host([icon='git-fork-private']):before {
+		content: '\\ea75';
+	}
+	:host([icon='lock']):before {
+		content: '\\ea75';
+	}
+	:host([icon='mirror-private']):before {
+		content: '\\ea75';
+	}
+	:host([icon='close']):before {
+		content: '\\ea76';
+	}
+	:host([icon='remove-close']):before {
+		content: '\\ea76';
+	}
+	:host([icon='x']):before {
+		content: '\\ea76';
+	}
+	:host([icon='repo-sync']):before {
+		content: '\\ea77';
+	}
+	:host([icon='sync']):before {
+		content: '\\ea77';
+	}
+	:host([icon='clone']):before {
+		content: '\\ea78';
+	}
+	:host([icon='desktop-download']):before {
+		content: '\\ea78';
+	}
+	:host([icon='beaker']):before {
+		content: '\\ea79';
+	}
+	:host([icon='microscope']):before {
+		content: '\\ea79';
+	}
+	:host([icon='vm']):before {
+		content: '\\ea7a';
+	}
+	:host([icon='device-desktop']):before {
+		content: '\\ea7a';
+	}
+	:host([icon='file']):before {
+		content: '\\ea7b';
+	}
+	:host([icon='file-text']):before {
+		content: '\\ea7b';
+	}
+	:host([icon='more']):before {
+		content: '\\ea7c';
+	}
+	:host([icon='ellipsis']):before {
+		content: '\\ea7c';
+	}
+	:host([icon='kebab-horizontal']):before {
+		content: '\\ea7c';
+	}
+	:host([icon='mail-reply']):before {
+		content: '\\ea7d';
+	}
+	:host([icon='reply']):before {
+		content: '\\ea7d';
+	}
+	:host([icon='organization']):before {
+		content: '\\ea7e';
+	}
+	:host([icon='organization-filled']):before {
+		content: '\\ea7e';
+	}
+	:host([icon='organization-outline']):before {
+		content: '\\ea7e';
+	}
+	:host([icon='new-file']):before {
+		content: '\\ea7f';
+	}
+	:host([icon='file-add']):before {
+		content: '\\ea7f';
+	}
+	:host([icon='new-folder']):before {
+		content: '\\ea80';
+	}
+	:host([icon='file-directory-create']):before {
+		content: '\\ea80';
+	}
+	:host([icon='trash']):before {
+		content: '\\ea81';
+	}
+	:host([icon='trashcan']):before {
+		content: '\\ea81';
+	}
+	:host([icon='history']):before {
+		content: '\\ea82';
+	}
+	:host([icon='clock']):before {
+		content: '\\ea82';
+	}
+	:host([icon='folder']):before {
+		content: '\\ea83';
+	}
+	:host([icon='file-directory']):before {
+		content: '\\ea83';
+	}
+	:host([icon='symbol-folder']):before {
+		content: '\\ea83';
+	}
+	:host([icon='logo-github']):before {
+		content: '\\ea84';
+	}
+	:host([icon='mark-github']):before {
+		content: '\\ea84';
+	}
+	:host([icon='github']):before {
+		content: '\\ea84';
+	}
+	:host([icon='terminal']):before {
+		content: '\\ea85';
+	}
+	:host([icon='console']):before {
+		content: '\\ea85';
+	}
+	:host([icon='repl']):before {
+		content: '\\ea85';
+	}
+	:host([icon='zap']):before {
+		content: '\\ea86';
+	}
+	:host([icon='symbol-event']):before {
+		content: '\\ea86';
+	}
+	:host([icon='error']):before {
+		content: '\\ea87';
+	}
+	:host([icon='stop']):before {
+		content: '\\ea87';
+	}
+	:host([icon='variable']):before {
+		content: '\\ea88';
+	}
+	:host([icon='symbol-variable']):before {
+		content: '\\ea88';
+	}
+	:host([icon='array']):before {
+		content: '\\ea8a';
+	}
+	:host([icon='symbol-array']):before {
+		content: '\\ea8a';
+	}
+	:host([icon='symbol-module']):before {
+		content: '\\ea8b';
+	}
+	:host([icon='symbol-package']):before {
+		content: '\\ea8b';
+	}
+	:host([icon='symbol-namespace']):before {
+		content: '\\ea8b';
+	}
+	:host([icon='symbol-object']):before {
+		content: '\\ea8b';
+	}
+	:host([icon='symbol-method']):before {
+		content: '\\ea8c';
+	}
+	:host([icon='symbol-function']):before {
+		content: '\\ea8c';
+	}
+	:host([icon='symbol-constructor']):before {
+		content: '\\ea8c';
+	}
+	:host([icon='symbol-boolean']):before {
+		content: '\\ea8f';
+	}
+	:host([icon='symbol-null']):before {
+		content: '\\ea8f';
+	}
+	:host([icon='symbol-numeric']):before {
+		content: '\\ea90';
+	}
+	:host([icon='symbol-number']):before {
+		content: '\\ea90';
+	}
+	:host([icon='symbol-structure']):before {
+		content: '\\ea91';
+	}
+	:host([icon='symbol-struct']):before {
+		content: '\\ea91';
+	}
+	:host([icon='symbol-parameter']):before {
+		content: '\\ea92';
+	}
+	:host([icon='symbol-type-parameter']):before {
+		content: '\\ea92';
+	}
+	:host([icon='symbol-key']):before {
+		content: '\\ea93';
+	}
+	:host([icon='symbol-text']):before {
+		content: '\\ea93';
+	}
+	:host([icon='symbol-reference']):before {
+		content: '\\ea94';
+	}
+	:host([icon='go-to-file']):before {
+		content: '\\ea94';
+	}
+	:host([icon='symbol-enum']):before {
+		content: '\\ea95';
+	}
+	:host([icon='symbol-value']):before {
+		content: '\\ea95';
+	}
+	:host([icon='symbol-ruler']):before {
+		content: '\\ea96';
+	}
+	:host([icon='symbol-unit']):before {
+		content: '\\ea96';
+	}
+	:host([icon='activate-breakpoints']):before {
+		content: '\\ea97';
+	}
+	:host([icon='archive']):before {
+		content: '\\ea98';
+	}
+	:host([icon='arrow-both']):before {
+		content: '\\ea99';
+	}
+	:host([icon='arrow-down']):before {
+		content: '\\ea9a';
+	}
+	:host([icon='arrow-left']):before {
+		content: '\\ea9b';
+	}
+	:host([icon='arrow-right']):before {
+		content: '\\ea9c';
+	}
+	:host([icon='arrow-small-down']):before {
+		content: '\\ea9d';
+	}
+	:host([icon='arrow-small-left']):before {
+		content: '\\ea9e';
+	}
+	:host([icon='arrow-small-right']):before {
+		content: '\\ea9f';
+	}
+	:host([icon='arrow-small-up']):before {
+		content: '\\eaa0';
+	}
+	:host([icon='arrow-up']):before {
+		content: '\\eaa1';
+	}
+	:host([icon='bell']):before {
+		content: '\\eaa2';
+	}
+	:host([icon='bold']):before {
+		content: '\\eaa3';
+	}
+	:host([icon='book']):before {
+		content: '\\eaa4';
+	}
+	:host([icon='bookmark']):before {
+		content: '\\eaa5';
+	}
+	:host([icon='debug-breakpoint-conditional-unverified']):before {
+		content: '\\eaa6';
+	}
+	:host([icon='debug-breakpoint-conditional']):before {
+		content: '\\eaa7';
+	}
+	:host([icon='debug-breakpoint-conditional-disabled']):before {
+		content: '\\eaa7';
+	}
+	:host([icon='debug-breakpoint-data-unverified']):before {
+		content: '\\eaa8';
+	}
+	:host([icon='debug-breakpoint-data']):before {
+		content: '\\eaa9';
+	}
+	:host([icon='debug-breakpoint-data-disabled']):before {
+		content: '\\eaa9';
+	}
+	:host([icon='debug-breakpoint-log-unverified']):before {
+		content: '\\eaaa';
+	}
+	:host([icon='debug-breakpoint-log']):before {
+		content: '\\eaab';
+	}
+	:host([icon='debug-breakpoint-log-disabled']):before {
+		content: '\\eaab';
+	}
+	:host([icon='briefcase']):before {
+		content: '\\eaac';
+	}
+	:host([icon='broadcast']):before {
+		content: '\\eaad';
+	}
+	:host([icon='browser']):before {
+		content: '\\eaae';
+	}
+	:host([icon='bug']):before {
+		content: '\\eaaf';
+	}
+	:host([icon='calendar']):before {
+		content: '\\eab0';
+	}
+	:host([icon='case-sensitive']):before {
+		content: '\\eab1';
+	}
+	:host([icon='check']):before {
+		content: '\\eab2';
+	}
+	:host([icon='checklist']):before {
+		content: '\\eab3';
+	}
+	:host([icon='chevron-down']):before {
+		content: '\\eab4';
+	}
+	:host([icon='chevron-left']):before {
+		content: '\\eab5';
+	}
+	:host([icon='chevron-right']):before {
+		content: '\\eab6';
+	}
+	:host([icon='chevron-up']):before {
+		content: '\\eab7';
+	}
+	:host([icon='chrome-close']):before {
+		content: '\\eab8';
+	}
+	:host([icon='chrome-maximize']):before {
+		content: '\\eab9';
+	}
+	:host([icon='chrome-minimize']):before {
+		content: '\\eaba';
+	}
+	:host([icon='chrome-restore']):before {
+		content: '\\eabb';
+	}
+	:host([icon='circle-outline']):before {
+		content: '\\eabc';
+	}
+	:host([icon='debug-breakpoint-unverified']):before {
+		content: '\\eabc';
+	}
+	:host([icon='circle-slash']):before {
+		content: '\\eabd';
+	}
+	:host([icon='circuit-board']):before {
+		content: '\\eabe';
+	}
+	:host([icon='clear-all']):before {
+		content: '\\eabf';
+	}
+	:host([icon='clippy']):before {
+		content: '\\eac0';
+	}
+	:host([icon='close-all']):before {
+		content: '\\eac1';
+	}
+	:host([icon='cloud-download']):before {
+		content: '\\eac2';
+	}
+	:host([icon='cloud-upload']):before {
+		content: '\\eac3';
+	}
+	:host([icon='code']):before {
+		content: '\\eac4';
+	}
+	:host([icon='collapse-all']):before {
+		content: '\\eac5';
+	}
+	:host([icon='color-mode']):before {
+		content: '\\eac6';
+	}
+	:host([icon='comment-discussion']):before {
+		content: '\\eac7';
+	}
+	:host([icon='credit-card']):before {
+		content: '\\eac9';
+	}
+	:host([icon='dash']):before {
+		content: '\\eacc';
+	}
+	:host([icon='dashboard']):before {
+		content: '\\eacd';
+	}
+	:host([icon='database']):before {
+		content: '\\eace';
+	}
+	:host([icon='debug-continue']):before {
+		content: '\\eacf';
+	}
+	:host([icon='debug-disconnect']):before {
+		content: '\\ead0';
+	}
+	:host([icon='debug-pause']):before {
+		content: '\\ead1';
+	}
+	:host([icon='debug-restart']):before {
+		content: '\\ead2';
+	}
+	:host([icon='debug-start']):before {
+		content: '\\ead3';
+	}
+	:host([icon='debug-step-into']):before {
+		content: '\\ead4';
+	}
+	:host([icon='debug-step-out']):before {
+		content: '\\ead5';
+	}
+	:host([icon='debug-step-over']):before {
+		content: '\\ead6';
+	}
+	:host([icon='debug-stop']):before {
+		content: '\\ead7';
+	}
+	:host([icon='debug']):before {
+		content: '\\ead8';
+	}
+	:host([icon='device-camera-video']):before {
+		content: '\\ead9';
+	}
+	:host([icon='device-camera']):before {
+		content: '\\eada';
+	}
+	:host([icon='device-mobile']):before {
+		content: '\\eadb';
+	}
+	:host([icon='diff-added']):before {
+		content: '\\eadc';
+	}
+	:host([icon='diff-ignored']):before {
+		content: '\\eadd';
+	}
+	:host([icon='diff-modified']):before {
+		content: '\\eade';
+	}
+	:host([icon='diff-removed']):before {
+		content: '\\eadf';
+	}
+	:host([icon='diff-renamed']):before {
+		content: '\\eae0';
+	}
+	:host([icon='diff']):before {
+		content: '\\eae1';
+	}
+	:host([icon='discard']):before {
+		content: '\\eae2';
+	}
+	:host([icon='editor-layout']):before {
+		content: '\\eae3';
+	}
+	:host([icon='empty-window']):before {
+		content: '\\eae4';
+	}
+	:host([icon='exclude']):before {
+		content: '\\eae5';
+	}
+	:host([icon='extensions']):before {
+		content: '\\eae6';
+	}
+	:host([icon='eye-closed']):before {
+		content: '\\eae7';
+	}
+	:host([icon='file-binary']):before {
+		content: '\\eae8';
+	}
+	:host([icon='file-code']):before {
+		content: '\\eae9';
+	}
+	:host([icon='file-media']):before {
+		content: '\\eaea';
+	}
+	:host([icon='file-pdf']):before {
+		content: '\\eaeb';
+	}
+	:host([icon='file-submodule']):before {
+		content: '\\eaec';
+	}
+	:host([icon='file-symlink-directory']):before {
+		content: '\\eaed';
+	}
+	:host([icon='file-symlink-file']):before {
+		content: '\\eaee';
+	}
+	:host([icon='file-zip']):before {
+		content: '\\eaef';
+	}
+	:host([icon='files']):before {
+		content: '\\eaf0';
+	}
+	:host([icon='filter']):before {
+		content: '\\eaf1';
+	}
+	:host([icon='flame']):before {
+		content: '\\eaf2';
+	}
+	:host([icon='fold-down']):before {
+		content: '\\eaf3';
+	}
+	:host([icon='fold-up']):before {
+		content: '\\eaf4';
+	}
+	:host([icon='fold']):before {
+		content: '\\eaf5';
+	}
+	:host([icon='folder-active']):before {
+		content: '\\eaf6';
+	}
+	:host([icon='folder-opened']):before {
+		content: '\\eaf7';
+	}
+	:host([icon='gear']):before {
+		content: '\\eaf8';
+	}
+	:host([icon='gift']):before {
+		content: '\\eaf9';
+	}
+	:host([icon='gist-secret']):before {
+		content: '\\eafa';
+	}
+	:host([icon='gist']):before {
+		content: '\\eafb';
+	}
+	:host([icon='git-commit']):before {
+		content: '\\eafc';
+	}
+	:host([icon='git-compare']):before {
+		content: '\\eafd';
+	}
+	:host([icon='compare-changes']):before {
+		content: '\\eafd';
+	}
+	:host([icon='git-merge']):before {
+		content: '\\eafe';
+	}
+	:host([icon='github-action']):before {
+		content: '\\eaff';
+	}
+	:host([icon='github-alt']):before {
+		content: '\\eb00';
+	}
+	:host([icon='globe']):before {
+		content: '\\eb01';
+	}
+	:host([icon='grabber']):before {
+		content: '\\eb02';
+	}
+	:host([icon='graph']):before {
+		content: '\\eb03';
+	}
+	:host([icon='gripper']):before {
+		content: '\\eb04';
+	}
+	:host([icon='heart']):before {
+		content: '\\eb05';
+	}
+	:host([icon='home']):before {
+		content: '\\eb06';
+	}
+	:host([icon='horizontal-rule']):before {
+		content: '\\eb07';
+	}
+	:host([icon='hubot']):before {
+		content: '\\eb08';
+	}
+	:host([icon='inbox']):before {
+		content: '\\eb09';
+	}
+	:host([icon='issue-reopened']):before {
+		content: '\\eb0b';
+	}
+	:host([icon='issues']):before {
+		content: '\\eb0c';
+	}
+	:host([icon='italic']):before {
+		content: '\\eb0d';
+	}
+	:host([icon='jersey']):before {
+		content: '\\eb0e';
+	}
+	:host([icon='json']):before {
+		content: '\\eb0f';
+	}
+	:host([icon='kebab-vertical']):before {
+		content: '\\eb10';
+	}
+	:host([icon='key']):before {
+		content: '\\eb11';
+	}
+	:host([icon='law']):before {
+		content: '\\eb12';
+	}
+	:host([icon='lightbulb-autofix']):before {
+		content: '\\eb13';
+	}
+	:host([icon='link-external']):before {
+		content: '\\eb14';
+	}
+	:host([icon='link']):before {
+		content: '\\eb15';
+	}
+	:host([icon='list-ordered']):before {
+		content: '\\eb16';
+	}
+	:host([icon='list-unordered']):before {
+		content: '\\eb17';
+	}
+	:host([icon='live-share']):before {
+		content: '\\eb18';
+	}
+	:host([icon='loading']):before {
+		content: '\\eb19';
+	}
+	:host([icon='location']):before {
+		content: '\\eb1a';
+	}
+	:host([icon='mail-read']):before {
+		content: '\\eb1b';
+	}
+	:host([icon='mail']):before {
+		content: '\\eb1c';
+	}
+	:host([icon='markdown']):before {
+		content: '\\eb1d';
+	}
+	:host([icon='megaphone']):before {
+		content: '\\eb1e';
+	}
+	:host([icon='mention']):before {
+		content: '\\eb1f';
+	}
+	:host([icon='milestone']):before {
+		content: '\\eb20';
+	}
+	:host([icon='mortar-board']):before {
+		content: '\\eb21';
+	}
+	:host([icon='move']):before {
+		content: '\\eb22';
+	}
+	:host([icon='multiple-windows']):before {
+		content: '\\eb23';
+	}
+	:host([icon='mute']):before {
+		content: '\\eb24';
+	}
+	:host([icon='no-newline']):before {
+		content: '\\eb25';
+	}
+	:host([icon='note']):before {
+		content: '\\eb26';
+	}
+	:host([icon='octoface']):before {
+		content: '\\eb27';
+	}
+	:host([icon='open-preview']):before {
+		content: '\\eb28';
+	}
+	:host([icon='package']):before {
+		content: '\\eb29';
+	}
+	:host([icon='paintcan']):before {
+		content: '\\eb2a';
+	}
+	:host([icon='pin']):before {
+		content: '\\eb2b';
+	}
+	:host([icon='play']):before {
+		content: '\\eb2c';
+	}
+	:host([icon='run']):before {
+		content: '\\eb2c';
+	}
+	:host([icon='plug']):before {
+		content: '\\eb2d';
+	}
+	:host([icon='preserve-case']):before {
+		content: '\\eb2e';
+	}
+	:host([icon='preview']):before {
+		content: '\\eb2f';
+	}
+	:host([icon='project']):before {
+		content: '\\eb30';
+	}
+	:host([icon='pulse']):before {
+		content: '\\eb31';
+	}
+	:host([icon='question']):before {
+		content: '\\eb32';
+	}
+	:host([icon='quote']):before {
+		content: '\\eb33';
+	}
+	:host([icon='radio-tower']):before {
+		content: '\\eb34';
+	}
+	:host([icon='reactions']):before {
+		content: '\\eb35';
+	}
+	:host([icon='references']):before {
+		content: '\\eb36';
+	}
+	:host([icon='refresh']):before {
+		content: '\\eb37';
+	}
+	:host([icon='regex']):before {
+		content: '\\eb38';
+	}
+	:host([icon='remote-explorer']):before {
+		content: '\\eb39';
+	}
+	:host([icon='remote']):before {
+		content: '\\eb3a';
+	}
+	:host([icon='remove']):before {
+		content: '\\eb3b';
+	}
+	:host([icon='replace-all']):before {
+		content: '\\eb3c';
+	}
+	:host([icon='replace']):before {
+		content: '\\eb3d';
+	}
+	:host([icon='repo-clone']):before {
+		content: '\\eb3e';
+	}
+	:host([icon='repo-force-push']):before {
+		content: '\\eb3f';
+	}
+	:host([icon='repo-pull']):before {
+		content: '\\eb40';
+	}
+	:host([icon='repo-push']):before {
+		content: '\\eb41';
+	}
+	:host([icon='report']):before {
+		content: '\\eb42';
+	}
+	:host([icon='request-changes']):before {
+		content: '\\eb43';
+	}
+	:host([icon='rocket']):before {
+		content: '\\eb44';
+	}
+	:host([icon='root-folder-opened']):before {
+		content: '\\eb45';
+	}
+	:host([icon='root-folder']):before {
+		content: '\\eb46';
+	}
+	:host([icon='rss']):before {
+		content: '\\eb47';
+	}
+	:host([icon='ruby']):before {
+		content: '\\eb48';
+	}
+	:host([icon='save-all']):before {
+		content: '\\eb49';
+	}
+	:host([icon='save-as']):before {
+		content: '\\eb4a';
+	}
+	:host([icon='save']):before {
+		content: '\\eb4b';
+	}
+	:host([icon='screen-full']):before {
+		content: '\\eb4c';
+	}
+	:host([icon='screen-normal']):before {
+		content: '\\eb4d';
+	}
+	:host([icon='search-stop']):before {
+		content: '\\eb4e';
+	}
+	:host([icon='server']):before {
+		content: '\\eb50';
+	}
+	:host([icon='settings-gear']):before {
+		content: '\\eb51';
+	}
+	:host([icon='settings']):before {
+		content: '\\eb52';
+	}
+	:host([icon='shield']):before {
+		content: '\\eb53';
+	}
+	:host([icon='smiley']):before {
+		content: '\\eb54';
+	}
+	:host([icon='sort-precedence']):before {
+		content: '\\eb55';
+	}
+	:host([icon='split-horizontal']):before {
+		content: '\\eb56';
+	}
+	:host([icon='split-vertical']):before {
+		content: '\\eb57';
+	}
+	:host([icon='squirrel']):before {
+		content: '\\eb58';
+	}
+	:host([icon='star-full']):before {
+		content: '\\eb59';
+	}
+	:host([icon='star-half']):before {
+		content: '\\eb5a';
+	}
+	:host([icon='symbol-class']):before {
+		content: '\\eb5b';
+	}
+	:host([icon='symbol-color']):before {
+		content: '\\eb5c';
+	}
+	:host([icon='symbol-constant']):before {
+		content: '\\eb5d';
+	}
+	:host([icon='symbol-enum-member']):before {
+		content: '\\eb5e';
+	}
+	:host([icon='symbol-field']):before {
+		content: '\\eb5f';
+	}
+	:host([icon='symbol-file']):before {
+		content: '\\eb60';
+	}
+	:host([icon='symbol-interface']):before {
+		content: '\\eb61';
+	}
+	:host([icon='symbol-keyword']):before {
+		content: '\\eb62';
+	}
+	:host([icon='symbol-misc']):before {
+		content: '\\eb63';
+	}
+	:host([icon='symbol-operator']):before {
+		content: '\\eb64';
+	}
+	:host([icon='symbol-property']):before {
+		content: '\\eb65';
+	}
+	:host([icon='wrench']):before {
+		content: '\\eb65';
+	}
+	:host([icon='wrench-subaction']):before {
+		content: '\\eb65';
+	}
+	:host([icon='symbol-snippet']):before {
+		content: '\\eb66';
+	}
+	:host([icon='tasklist']):before {
+		content: '\\eb67';
+	}
+	:host([icon='telescope']):before {
+		content: '\\eb68';
+	}
+	:host([icon='text-size']):before {
+		content: '\\eb69';
+	}
+	:host([icon='three-bars']):before {
+		content: '\\eb6a';
+	}
+	:host([icon='thumbsdown']):before {
+		content: '\\eb6b';
+	}
+	:host([icon='thumbsup']):before {
+		content: '\\eb6c';
+	}
+	:host([icon='tools']):before {
+		content: '\\eb6d';
+	}
+	:host([icon='triangle-down']):before {
+		content: '\\eb6e';
+	}
+	:host([icon='triangle-left']):before {
+		content: '\\eb6f';
+	}
+	:host([icon='triangle-right']):before {
+		content: '\\eb70';
+	}
+	:host([icon='triangle-up']):before {
+		content: '\\eb71';
+	}
+	:host([icon='twitter']):before {
+		content: '\\eb72';
+	}
+	:host([icon='unfold']):before {
+		content: '\\eb73';
+	}
+	:host([icon='unlock']):before {
+		content: '\\eb74';
+	}
+	:host([icon='unmute']):before {
+		content: '\\eb75';
+	}
+	:host([icon='unverified']):before {
+		content: '\\eb76';
+	}
+	:host([icon='verified']):before {
+		content: '\\eb77';
+	}
+	:host([icon='versions']):before {
+		content: '\\eb78';
+	}
+	:host([icon='vm-active']):before {
+		content: '\\eb79';
+	}
+	:host([icon='vm-outline']):before {
+		content: '\\eb7a';
+	}
+	:host([icon='vm-running']):before {
+		content: '\\eb7b';
+	}
+	:host([icon='watch']):before {
+		content: '\\eb7c';
+	}
+	:host([icon='whitespace']):before {
+		content: '\\eb7d';
+	}
+	:host([icon='whole-word']):before {
+		content: '\\eb7e';
+	}
+	:host([icon='window']):before {
+		content: '\\eb7f';
+	}
+	:host([icon='word-wrap']):before {
+		content: '\\eb80';
+	}
+	:host([icon='zoom-in']):before {
+		content: '\\eb81';
+	}
+	:host([icon='zoom-out']):before {
+		content: '\\eb82';
+	}
+	:host([icon='list-filter']):before {
+		content: '\\eb83';
+	}
+	:host([icon='list-flat']):before {
+		content: '\\eb84';
+	}
+	:host([icon='list-selection']):before {
+		content: '\\eb85';
+	}
+	:host([icon='selection']):before {
+		content: '\\eb85';
+	}
+	:host([icon='list-tree']):before {
+		content: '\\eb86';
+	}
+	:host([icon='debug-breakpoint-function-unverified']):before {
+		content: '\\eb87';
+	}
+	:host([icon='debug-breakpoint-function']):before {
+		content: '\\eb88';
+	}
+	:host([icon='debug-breakpoint-function-disabled']):before {
+		content: '\\eb88';
+	}
+	:host([icon='debug-stackframe-active']):before {
+		content: '\\eb89';
+	}
+	:host([icon='debug-stackframe-dot']):before {
+		content: '\\eb8a';
+	}
+	:host([icon='debug-stackframe']):before {
+		content: '\\eb8b';
+	}
+	:host([icon='debug-stackframe-focused']):before {
+		content: '\\eb8b';
+	}
+	:host([icon='debug-breakpoint-unsupported']):before {
+		content: '\\eb8c';
+	}
+	:host([icon='symbol-string']):before {
+		content: '\\eb8d';
+	}
+	:host([icon='debug-reverse-continue']):before {
+		content: '\\eb8e';
+	}
+	:host([icon='debug-step-back']):before {
+		content: '\\eb8f';
+	}
+	:host([icon='debug-restart-frame']):before {
+		content: '\\eb90';
+	}
+	:host([icon='debug-alt']):before {
+		content: '\\eb91';
+	}
+	:host([icon='call-incoming']):before {
+		content: '\\eb92';
+	}
+	:host([icon='call-outgoing']):before {
+		content: '\\eb93';
+	}
+	:host([icon='menu']):before {
+		content: '\\eb94';
+	}
+	:host([icon='expand-all']):before {
+		content: '\\eb95';
+	}
+	:host([icon='feedback']):before {
+		content: '\\eb96';
+	}
+	:host([icon='group-by-ref-type']):before {
+		content: '\\eb97';
+	}
+	:host([icon='ungroup-by-ref-type']):before {
+		content: '\\eb98';
+	}
+	:host([icon='account']):before {
+		content: '\\eb99';
+	}
+	:host([icon='bell-dot']):before {
+		content: '\\eb9a';
+	}
+	:host([icon='debug-console']):before {
+		content: '\\eb9b';
+	}
+	:host([icon='library']):before {
+		content: '\\eb9c';
+	}
+	:host([icon='output']):before {
+		content: '\\eb9d';
+	}
+	:host([icon='run-all']):before {
+		content: '\\eb9e';
+	}
+	:host([icon='sync-ignored']):before {
+		content: '\\eb9f';
+	}
+	:host([icon='pinned']):before {
+		content: '\\eba0';
+	}
+	:host([icon='github-inverted']):before {
+		content: '\\eba1';
+	}
+	:host([icon='server-process']):before {
+		content: '\\eba2';
+	}
+	:host([icon='server-environment']):before {
+		content: '\\eba3';
+	}
+	:host([icon='pass']):before {
+		content: '\\eba4';
+	}
+	:host([icon='issue-closed']):before {
+		content: '\\eba4';
+	}
+	:host([icon='stop-circle']):before {
+		content: '\\eba5';
+	}
+	:host([icon='play-circle']):before {
+		content: '\\eba6';
+	}
+	:host([icon='record']):before {
+		content: '\\eba7';
+	}
+	:host([icon='debug-alt-small']):before {
+		content: '\\eba8';
+	}
+	:host([icon='vm-connect']):before {
+		content: '\\eba9';
+	}
+	:host([icon='cloud']):before {
+		content: '\\ebaa';
+	}
+	:host([icon='merge']):before {
+		content: '\\ebab';
+	}
+	:host([icon='export']):before {
+		content: '\\ebac';
+	}
+	:host([icon='graph-left']):before {
+		content: '\\ebad';
+	}
+	:host([icon='magnet']):before {
+		content: '\\ebae';
+	}
+	:host([icon='notebook']):before {
+		content: '\\ebaf';
+	}
+	:host([icon='redo']):before {
+		content: '\\ebb0';
+	}
+	:host([icon='check-all']):before {
+		content: '\\ebb1';
+	}
+	:host([icon='pinned-dirty']):before {
+		content: '\\ebb2';
+	}
+	:host([icon='pass-filled']):before {
+		content: '\\ebb3';
+	}
+	:host([icon='circle-large-filled']):before {
+		content: '\\ebb4';
+	}
+	:host([icon='circle-large-outline']):before {
+		content: '\\ebb5';
+	}
+	:host([icon='combine']):before {
+		content: '\\ebb6';
+	}
+	:host([icon='gather']):before {
+		content: '\\ebb6';
+	}
+	:host([icon='table']):before {
+		content: '\\ebb7';
+	}
+	:host([icon='variable-group']):before {
+		content: '\\ebb8';
+	}
+	:host([icon='type-hierarchy']):before {
+		content: '\\ebb9';
+	}
+	:host([icon='type-hierarchy-sub']):before {
+		content: '\\ebba';
+	}
+	:host([icon='type-hierarchy-super']):before {
+		content: '\\ebbb';
+	}
+	:host([icon='git-pull-request-create']):before {
+		content: '\\ebbc';
+	}
+	:host([icon='run-above']):before {
+		content: '\\ebbd';
+	}
+	:host([icon='run-below']):before {
+		content: '\\ebbe';
+	}
+	:host([icon='notebook-template']):before {
+		content: '\\ebbf';
+	}
+	:host([icon='debug-rerun']):before {
+		content: '\\ebc0';
+	}
+	:host([icon='workspace-trusted']):before {
+		content: '\\ebc1';
+	}
+	:host([icon='workspace-untrusted']):before {
+		content: '\\ebc2';
+	}
+	:host([icon='workspace-unknown']):before {
+		content: '\\ebc3';
+	}
+	:host([icon='terminal-cmd']):before {
+		content: '\\ebc4';
+	}
+	:host([icon='terminal-debian']):before {
+		content: '\\ebc5';
+	}
+	:host([icon='terminal-linux']):before {
+		content: '\\ebc6';
+	}
+	:host([icon='terminal-powershell']):before {
+		content: '\\ebc7';
+	}
+	:host([icon='terminal-tmux']):before {
+		content: '\\ebc8';
+	}
+	:host([icon='terminal-ubuntu']):before {
+		content: '\\ebc9';
+	}
+	:host([icon='terminal-bash']):before {
+		content: '\\ebca';
+	}
+	:host([icon='arrow-swap']):before {
+		content: '\\ebcb';
+	}
+	:host([icon='copy']):before {
+		content: '\\ebcc';
+	}
+	:host([icon='person-add']):before {
+		content: '\\ebcd';
+	}
+	:host([icon='filter-filled']):before {
+		content: '\\ebce';
+	}
+	:host([icon='wand']):before {
+		content: '\\ebcf';
+	}
+	:host([icon='debug-line-by-line']):before {
+		content: '\\ebd0';
+	}
+	:host([icon='inspect']):before {
+		content: '\\ebd1';
+	}
+	:host([icon='layers']):before {
+		content: '\\ebd2';
+	}
+	:host([icon='layers-dot']):before {
+		content: '\\ebd3';
+	}
+	:host([icon='layers-active']):before {
+		content: '\\ebd4';
+	}
+	:host([icon='compass']):before {
+		content: '\\ebd5';
+	}
+	:host([icon='compass-dot']):before {
+		content: '\\ebd6';
+	}
+	:host([icon='compass-active']):before {
+		content: '\\ebd7';
+	}
+	:host([icon='azure']):before {
+		content: '\\ebd8';
+	}
+	:host([icon='issue-draft']):before {
+		content: '\\ebd9';
+	}
+	:host([icon='git-pull-request-closed']):before {
+		content: '\\ebda';
+	}
+	:host([icon='git-pull-request-draft']):before {
+		content: '\\ebdb';
+	}
+	:host([icon='debug-all']):before {
+		content: '\\ebdc';
+	}
+	:host([icon='debug-coverage']):before {
+		content: '\\ebdd';
+	}
+	:host([icon='run-errors']):before {
+		content: '\\ebde';
+	}
+	:host([icon='folder-library']):before {
+		content: '\\ebdf';
+	}
+	:host([icon='debug-continue-small']):before {
+		content: '\\ebe0';
+	}
+	:host([icon='beaker-stop']):before {
+		content: '\\ebe1';
+	}
+	:host([icon='graph-line']):before {
+		content: '\\ebe2';
+	}
+	:host([icon='graph-scatter']):before {
+		content: '\\ebe3';
+	}
+	:host([icon='pie-chart']):before {
+		content: '\\ebe4';
+	}
+	:host([icon='bracket']):before {
+		content: '\\eb0f';
+	}
+	:host([icon='bracket-dot']):before {
+		content: '\\ebe5';
+	}
+	:host([icon='bracket-error']):before {
+		content: '\\ebe6';
+	}
+	:host([icon='lock-small']):before {
+		content: '\\ebe7';
+	}
+	:host([icon='azure-devops']):before {
+		content: '\\ebe8';
+	}
+	:host([icon='verified-filled']):before {
+		content: '\\ebe9';
+	}
+	:host([icon='newline']):before {
+		content: '\\ebea';
+	}
+	:host([icon='layout']):before {
+		content: '\\ebeb';
+	}
+	:host([icon='layout-activitybar-left']):before {
+		content: '\\ebec';
+	}
+	:host([icon='layout-activitybar-right']):before {
+		content: '\\ebed';
+	}
+	:host([icon='layout-panel-left']):before {
+		content: '\\ebee';
+	}
+	:host([icon='layout-panel-center']):before {
+		content: '\\ebef';
+	}
+	:host([icon='layout-panel-justify']):before {
+		content: '\\ebf0';
+	}
+	:host([icon='layout-panel-right']):before {
+		content: '\\ebf1';
+	}
+	:host([icon='layout-panel']):before {
+		content: '\\ebf2';
+	}
+	:host([icon='layout-sidebar-left']):before {
+		content: '\\ebf3';
+	}
+	:host([icon='layout-sidebar-right']):before {
+		content: '\\ebf4';
+	}
+	:host([icon='layout-statusbar']):before {
+		content: '\\ebf5';
+	}
+	:host([icon='layout-menubar']):before {
+		content: '\\ebf6';
+	}
+	:host([icon='layout-centered']):before {
+		content: '\\ebf7';
+	}
+	:host([icon='target']):before {
+		content: '\\ebf8';
+	}
+	:host([icon='gl-pinned-filled']):before {
+		font-family: 'glicons';
+		content: '\\f11c';
+		/* TODO: see relative positioning needed in every use-case */
+		position: relative;
+		left: 1px;
+	}
+	:host([icon='gl-graph']):before {
+		font-family: 'glicons';
+		content: '\\f102';
+	}
+
+	@keyframes codicon-spin {
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	:host([modifier='spin']) {
+		/* Use steps to throttle FPS to reduce CPU usage */
+		animation: codicon-spin 1.5s steps(30) infinite;
+	}
+	:host([icon='loading'][modifier='spin']) {
+		/* Use steps to throttle FPS to reduce CPU usage */
+		animation: codicon-spin 1.5s steps(30) infinite;
+
+		/* custom speed & easing for loading icon */
+		animation-duration: 1s !important;
+		animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;
+	}
+`;
+
+@customElement({ name: 'code-icon', styles: styles })
+export class CodeIcon extends FASTElement {
+	@attr
+	icon = '';
+
+	@attr
+	modifier = '';
+}
diff --git a/src/webviews/apps/shared/components/codicon.ts b/src/webviews/apps/shared/components/codicon.ts
deleted file mode 100644
index 656fb48..0000000
--- a/src/webviews/apps/shared/components/codicon.ts
+++ /dev/null
@@ -1,1537 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-@customElement('code-icon')
-export class CodeIcon extends LitElement {
-	// Escaping unicode: https://lit.dev/docs/components/styles/#using-unicode-escapes-in-styles
-	static override styles = css`
-		:host {
-			font: normal normal normal 16px/1 codicon;
-			display: inline-block;
-			text-decoration: none;
-			text-rendering: auto;
-			text-align: center;
-			-webkit-font-smoothing: antialiased;
-			-moz-osx-font-smoothing: grayscale;
-			user-select: none;
-			-webkit-user-select: none;
-			-ms-user-select: none;
-			color: inherit;
-			vertical-align: text-bottom;
-			letter-spacing: normal;
-		}
-
-		:host([icon='add']):before {
-			content: '\\ea60';
-		}
-		:host([icon='plus']):before {
-			content: '\\ea60';
-		}
-		:host([icon='gist-new']):before {
-			content: '\\ea60';
-		}
-		:host([icon='repo-create']):before {
-			content: '\\ea60';
-		}
-		:host([icon='lightbulb']):before {
-			content: '\\ea61';
-		}
-		:host([icon='light-bulb']):before {
-			content: '\\ea61';
-		}
-		:host([icon='repo']):before {
-			content: '\\ea62';
-		}
-		:host([icon='repo-delete']):before {
-			content: '\\ea62';
-		}
-		:host([icon='gist-fork']):before {
-			content: '\\ea63';
-		}
-		:host([icon='repo-forked']):before {
-			content: '\\ea63';
-		}
-		:host([icon='git-pull-request']):before {
-			content: '\\ea64';
-		}
-		:host([icon='git-pull-request-abandoned']):before {
-			content: '\\ea64';
-		}
-		:host([icon='record-keys']):before {
-			content: '\\ea65';
-		}
-		:host([icon='keyboard']):before {
-			content: '\\ea65';
-		}
-		:host([icon='tag']):before {
-			content: '\\ea66';
-		}
-		:host([icon='tag-add']):before {
-			content: '\\ea66';
-		}
-		:host([icon='tag-remove']):before {
-			content: '\\ea66';
-		}
-		:host([icon='person']):before {
-			content: '\\ea67';
-		}
-		:host([icon='person-follow']):before {
-			content: '\\ea67';
-		}
-		:host([icon='person-outline']):before {
-			content: '\\ea67';
-		}
-		:host([icon='person-filled']):before {
-			content: '\\ea67';
-		}
-		:host([icon='git-branch']):before {
-			content: '\\ea68';
-		}
-		:host([icon='git-branch-create']):before {
-			content: '\\ea68';
-		}
-		:host([icon='git-branch-delete']):before {
-			content: '\\ea68';
-		}
-		:host([icon='source-control']):before {
-			content: '\\ea68';
-		}
-		:host([icon='mirror']):before {
-			content: '\\ea69';
-		}
-		:host([icon='mirror-public']):before {
-			content: '\\ea69';
-		}
-		:host([icon='star']):before {
-			content: '\\ea6a';
-		}
-		:host([icon='star-add']):before {
-			content: '\\ea6a';
-		}
-		:host([icon='star-delete']):before {
-			content: '\\ea6a';
-		}
-		:host([icon='star-empty']):before {
-			content: '\\ea6a';
-		}
-		:host([icon='comment']):before {
-			content: '\\ea6b';
-		}
-		:host([icon='comment-add']):before {
-			content: '\\ea6b';
-		}
-		:host([icon='alert']):before {
-			content: '\\ea6c';
-		}
-		:host([icon='warning']):before {
-			content: '\\ea6c';
-		}
-		:host([icon='search']):before {
-			content: '\\ea6d';
-		}
-		:host([icon='search-save']):before {
-			content: '\\ea6d';
-		}
-		:host([icon='log-out']):before {
-			content: '\\ea6e';
-		}
-		:host([icon='sign-out']):before {
-			content: '\\ea6e';
-		}
-		:host([icon='log-in']):before {
-			content: '\\ea6f';
-		}
-		:host([icon='sign-in']):before {
-			content: '\\ea6f';
-		}
-		:host([icon='eye']):before {
-			content: '\\ea70';
-		}
-		:host([icon='eye-unwatch']):before {
-			content: '\\ea70';
-		}
-		:host([icon='eye-watch']):before {
-			content: '\\ea70';
-		}
-		:host([icon='circle-filled']):before {
-			content: '\\ea71';
-		}
-		:host([icon='primitive-dot']):before {
-			content: '\\ea71';
-		}
-		:host([icon='close-dirty']):before {
-			content: '\\ea71';
-		}
-		:host([icon='debug-breakpoint']):before {
-			content: '\\ea71';
-		}
-		:host([icon='debug-breakpoint-disabled']):before {
-			content: '\\ea71';
-		}
-		:host([icon='debug-hint']):before {
-			content: '\\ea71';
-		}
-		:host([icon='primitive-square']):before {
-			content: '\\ea72';
-		}
-		:host([icon='edit']):before {
-			content: '\\ea73';
-		}
-		:host([icon='pencil']):before {
-			content: '\\ea73';
-		}
-		:host([icon='info']):before {
-			content: '\\ea74';
-		}
-		:host([icon='issue-opened']):before {
-			content: '\\ea74';
-		}
-		:host([icon='gist-private']):before {
-			content: '\\ea75';
-		}
-		:host([icon='git-fork-private']):before {
-			content: '\\ea75';
-		}
-		:host([icon='lock']):before {
-			content: '\\ea75';
-		}
-		:host([icon='mirror-private']):before {
-			content: '\\ea75';
-		}
-		:host([icon='close']):before {
-			content: '\\ea76';
-		}
-		:host([icon='remove-close']):before {
-			content: '\\ea76';
-		}
-		:host([icon='x']):before {
-			content: '\\ea76';
-		}
-		:host([icon='repo-sync']):before {
-			content: '\\ea77';
-		}
-		:host([icon='sync']):before {
-			content: '\\ea77';
-		}
-		:host([icon='clone']):before {
-			content: '\\ea78';
-		}
-		:host([icon='desktop-download']):before {
-			content: '\\ea78';
-		}
-		:host([icon='beaker']):before {
-			content: '\\ea79';
-		}
-		:host([icon='microscope']):before {
-			content: '\\ea79';
-		}
-		:host([icon='vm']):before {
-			content: '\\ea7a';
-		}
-		:host([icon='device-desktop']):before {
-			content: '\\ea7a';
-		}
-		:host([icon='file']):before {
-			content: '\\ea7b';
-		}
-		:host([icon='file-text']):before {
-			content: '\\ea7b';
-		}
-		:host([icon='more']):before {
-			content: '\\ea7c';
-		}
-		:host([icon='ellipsis']):before {
-			content: '\\ea7c';
-		}
-		:host([icon='kebab-horizontal']):before {
-			content: '\\ea7c';
-		}
-		:host([icon='mail-reply']):before {
-			content: '\\ea7d';
-		}
-		:host([icon='reply']):before {
-			content: '\\ea7d';
-		}
-		:host([icon='organization']):before {
-			content: '\\ea7e';
-		}
-		:host([icon='organization-filled']):before {
-			content: '\\ea7e';
-		}
-		:host([icon='organization-outline']):before {
-			content: '\\ea7e';
-		}
-		:host([icon='new-file']):before {
-			content: '\\ea7f';
-		}
-		:host([icon='file-add']):before {
-			content: '\\ea7f';
-		}
-		:host([icon='new-folder']):before {
-			content: '\\ea80';
-		}
-		:host([icon='file-directory-create']):before {
-			content: '\\ea80';
-		}
-		:host([icon='trash']):before {
-			content: '\\ea81';
-		}
-		:host([icon='trashcan']):before {
-			content: '\\ea81';
-		}
-		:host([icon='history']):before {
-			content: '\\ea82';
-		}
-		:host([icon='clock']):before {
-			content: '\\ea82';
-		}
-		:host([icon='folder']):before {
-			content: '\\ea83';
-		}
-		:host([icon='file-directory']):before {
-			content: '\\ea83';
-		}
-		:host([icon='symbol-folder']):before {
-			content: '\\ea83';
-		}
-		:host([icon='logo-github']):before {
-			content: '\\ea84';
-		}
-		:host([icon='mark-github']):before {
-			content: '\\ea84';
-		}
-		:host([icon='github']):before {
-			content: '\\ea84';
-		}
-		:host([icon='terminal']):before {
-			content: '\\ea85';
-		}
-		:host([icon='console']):before {
-			content: '\\ea85';
-		}
-		:host([icon='repl']):before {
-			content: '\\ea85';
-		}
-		:host([icon='zap']):before {
-			content: '\\ea86';
-		}
-		:host([icon='symbol-event']):before {
-			content: '\\ea86';
-		}
-		:host([icon='error']):before {
-			content: '\\ea87';
-		}
-		:host([icon='stop']):before {
-			content: '\\ea87';
-		}
-		:host([icon='variable']):before {
-			content: '\\ea88';
-		}
-		:host([icon='symbol-variable']):before {
-			content: '\\ea88';
-		}
-		:host([icon='array']):before {
-			content: '\\ea8a';
-		}
-		:host([icon='symbol-array']):before {
-			content: '\\ea8a';
-		}
-		:host([icon='symbol-module']):before {
-			content: '\\ea8b';
-		}
-		:host([icon='symbol-package']):before {
-			content: '\\ea8b';
-		}
-		:host([icon='symbol-namespace']):before {
-			content: '\\ea8b';
-		}
-		:host([icon='symbol-object']):before {
-			content: '\\ea8b';
-		}
-		:host([icon='symbol-method']):before {
-			content: '\\ea8c';
-		}
-		:host([icon='symbol-function']):before {
-			content: '\\ea8c';
-		}
-		:host([icon='symbol-constructor']):before {
-			content: '\\ea8c';
-		}
-		:host([icon='symbol-boolean']):before {
-			content: '\\ea8f';
-		}
-		:host([icon='symbol-null']):before {
-			content: '\\ea8f';
-		}
-		:host([icon='symbol-numeric']):before {
-			content: '\\ea90';
-		}
-		:host([icon='symbol-number']):before {
-			content: '\\ea90';
-		}
-		:host([icon='symbol-structure']):before {
-			content: '\\ea91';
-		}
-		:host([icon='symbol-struct']):before {
-			content: '\\ea91';
-		}
-		:host([icon='symbol-parameter']):before {
-			content: '\\ea92';
-		}
-		:host([icon='symbol-type-parameter']):before {
-			content: '\\ea92';
-		}
-		:host([icon='symbol-key']):before {
-			content: '\\ea93';
-		}
-		:host([icon='symbol-text']):before {
-			content: '\\ea93';
-		}
-		:host([icon='symbol-reference']):before {
-			content: '\\ea94';
-		}
-		:host([icon='go-to-file']):before {
-			content: '\\ea94';
-		}
-		:host([icon='symbol-enum']):before {
-			content: '\\ea95';
-		}
-		:host([icon='symbol-value']):before {
-			content: '\\ea95';
-		}
-		:host([icon='symbol-ruler']):before {
-			content: '\\ea96';
-		}
-		:host([icon='symbol-unit']):before {
-			content: '\\ea96';
-		}
-		:host([icon='activate-breakpoints']):before {
-			content: '\\ea97';
-		}
-		:host([icon='archive']):before {
-			content: '\\ea98';
-		}
-		:host([icon='arrow-both']):before {
-			content: '\\ea99';
-		}
-		:host([icon='arrow-down']):before {
-			content: '\\ea9a';
-		}
-		:host([icon='arrow-left']):before {
-			content: '\\ea9b';
-		}
-		:host([icon='arrow-right']):before {
-			content: '\\ea9c';
-		}
-		:host([icon='arrow-small-down']):before {
-			content: '\\ea9d';
-		}
-		:host([icon='arrow-small-left']):before {
-			content: '\\ea9e';
-		}
-		:host([icon='arrow-small-right']):before {
-			content: '\\ea9f';
-		}
-		:host([icon='arrow-small-up']):before {
-			content: '\\eaa0';
-		}
-		:host([icon='arrow-up']):before {
-			content: '\\eaa1';
-		}
-		:host([icon='bell']):before {
-			content: '\\eaa2';
-		}
-		:host([icon='bold']):before {
-			content: '\\eaa3';
-		}
-		:host([icon='book']):before {
-			content: '\\eaa4';
-		}
-		:host([icon='bookmark']):before {
-			content: '\\eaa5';
-		}
-		:host([icon='debug-breakpoint-conditional-unverified']):before {
-			content: '\\eaa6';
-		}
-		:host([icon='debug-breakpoint-conditional']):before {
-			content: '\\eaa7';
-		}
-		:host([icon='debug-breakpoint-conditional-disabled']):before {
-			content: '\\eaa7';
-		}
-		:host([icon='debug-breakpoint-data-unverified']):before {
-			content: '\\eaa8';
-		}
-		:host([icon='debug-breakpoint-data']):before {
-			content: '\\eaa9';
-		}
-		:host([icon='debug-breakpoint-data-disabled']):before {
-			content: '\\eaa9';
-		}
-		:host([icon='debug-breakpoint-log-unverified']):before {
-			content: '\\eaaa';
-		}
-		:host([icon='debug-breakpoint-log']):before {
-			content: '\\eaab';
-		}
-		:host([icon='debug-breakpoint-log-disabled']):before {
-			content: '\\eaab';
-		}
-		:host([icon='briefcase']):before {
-			content: '\\eaac';
-		}
-		:host([icon='broadcast']):before {
-			content: '\\eaad';
-		}
-		:host([icon='browser']):before {
-			content: '\\eaae';
-		}
-		:host([icon='bug']):before {
-			content: '\\eaaf';
-		}
-		:host([icon='calendar']):before {
-			content: '\\eab0';
-		}
-		:host([icon='case-sensitive']):before {
-			content: '\\eab1';
-		}
-		:host([icon='check']):before {
-			content: '\\eab2';
-		}
-		:host([icon='checklist']):before {
-			content: '\\eab3';
-		}
-		:host([icon='chevron-down']):before {
-			content: '\\eab4';
-		}
-		:host([icon='chevron-left']):before {
-			content: '\\eab5';
-		}
-		:host([icon='chevron-right']):before {
-			content: '\\eab6';
-		}
-		:host([icon='chevron-up']):before {
-			content: '\\eab7';
-		}
-		:host([icon='chrome-close']):before {
-			content: '\\eab8';
-		}
-		:host([icon='chrome-maximize']):before {
-			content: '\\eab9';
-		}
-		:host([icon='chrome-minimize']):before {
-			content: '\\eaba';
-		}
-		:host([icon='chrome-restore']):before {
-			content: '\\eabb';
-		}
-		:host([icon='circle-outline']):before {
-			content: '\\eabc';
-		}
-		:host([icon='debug-breakpoint-unverified']):before {
-			content: '\\eabc';
-		}
-		:host([icon='circle-slash']):before {
-			content: '\\eabd';
-		}
-		:host([icon='circuit-board']):before {
-			content: '\\eabe';
-		}
-		:host([icon='clear-all']):before {
-			content: '\\eabf';
-		}
-		:host([icon='clippy']):before {
-			content: '\\eac0';
-		}
-		:host([icon='close-all']):before {
-			content: '\\eac1';
-		}
-		:host([icon='cloud-download']):before {
-			content: '\\eac2';
-		}
-		:host([icon='cloud-upload']):before {
-			content: '\\eac3';
-		}
-		:host([icon='code']):before {
-			content: '\\eac4';
-		}
-		:host([icon='collapse-all']):before {
-			content: '\\eac5';
-		}
-		:host([icon='color-mode']):before {
-			content: '\\eac6';
-		}
-		:host([icon='comment-discussion']):before {
-			content: '\\eac7';
-		}
-		:host([icon='credit-card']):before {
-			content: '\\eac9';
-		}
-		:host([icon='dash']):before {
-			content: '\\eacc';
-		}
-		:host([icon='dashboard']):before {
-			content: '\\eacd';
-		}
-		:host([icon='database']):before {
-			content: '\\eace';
-		}
-		:host([icon='debug-continue']):before {
-			content: '\\eacf';
-		}
-		:host([icon='debug-disconnect']):before {
-			content: '\\ead0';
-		}
-		:host([icon='debug-pause']):before {
-			content: '\\ead1';
-		}
-		:host([icon='debug-restart']):before {
-			content: '\\ead2';
-		}
-		:host([icon='debug-start']):before {
-			content: '\\ead3';
-		}
-		:host([icon='debug-step-into']):before {
-			content: '\\ead4';
-		}
-		:host([icon='debug-step-out']):before {
-			content: '\\ead5';
-		}
-		:host([icon='debug-step-over']):before {
-			content: '\\ead6';
-		}
-		:host([icon='debug-stop']):before {
-			content: '\\ead7';
-		}
-		:host([icon='debug']):before {
-			content: '\\ead8';
-		}
-		:host([icon='device-camera-video']):before {
-			content: '\\ead9';
-		}
-		:host([icon='device-camera']):before {
-			content: '\\eada';
-		}
-		:host([icon='device-mobile']):before {
-			content: '\\eadb';
-		}
-		:host([icon='diff-added']):before {
-			content: '\\eadc';
-		}
-		:host([icon='diff-ignored']):before {
-			content: '\\eadd';
-		}
-		:host([icon='diff-modified']):before {
-			content: '\\eade';
-		}
-		:host([icon='diff-removed']):before {
-			content: '\\eadf';
-		}
-		:host([icon='diff-renamed']):before {
-			content: '\\eae0';
-		}
-		:host([icon='diff']):before {
-			content: '\\eae1';
-		}
-		:host([icon='discard']):before {
-			content: '\\eae2';
-		}
-		:host([icon='editor-layout']):before {
-			content: '\\eae3';
-		}
-		:host([icon='empty-window']):before {
-			content: '\\eae4';
-		}
-		:host([icon='exclude']):before {
-			content: '\\eae5';
-		}
-		:host([icon='extensions']):before {
-			content: '\\eae6';
-		}
-		:host([icon='eye-closed']):before {
-			content: '\\eae7';
-		}
-		:host([icon='file-binary']):before {
-			content: '\\eae8';
-		}
-		:host([icon='file-code']):before {
-			content: '\\eae9';
-		}
-		:host([icon='file-media']):before {
-			content: '\\eaea';
-		}
-		:host([icon='file-pdf']):before {
-			content: '\\eaeb';
-		}
-		:host([icon='file-submodule']):before {
-			content: '\\eaec';
-		}
-		:host([icon='file-symlink-directory']):before {
-			content: '\\eaed';
-		}
-		:host([icon='file-symlink-file']):before {
-			content: '\\eaee';
-		}
-		:host([icon='file-zip']):before {
-			content: '\\eaef';
-		}
-		:host([icon='files']):before {
-			content: '\\eaf0';
-		}
-		:host([icon='filter']):before {
-			content: '\\eaf1';
-		}
-		:host([icon='flame']):before {
-			content: '\\eaf2';
-		}
-		:host([icon='fold-down']):before {
-			content: '\\eaf3';
-		}
-		:host([icon='fold-up']):before {
-			content: '\\eaf4';
-		}
-		:host([icon='fold']):before {
-			content: '\\eaf5';
-		}
-		:host([icon='folder-active']):before {
-			content: '\\eaf6';
-		}
-		:host([icon='folder-opened']):before {
-			content: '\\eaf7';
-		}
-		:host([icon='gear']):before {
-			content: '\\eaf8';
-		}
-		:host([icon='gift']):before {
-			content: '\\eaf9';
-		}
-		:host([icon='gist-secret']):before {
-			content: '\\eafa';
-		}
-		:host([icon='gist']):before {
-			content: '\\eafb';
-		}
-		:host([icon='git-commit']):before {
-			content: '\\eafc';
-		}
-		:host([icon='git-compare']):before {
-			content: '\\eafd';
-		}
-		:host([icon='compare-changes']):before {
-			content: '\\eafd';
-		}
-		:host([icon='git-merge']):before {
-			content: '\\eafe';
-		}
-		:host([icon='github-action']):before {
-			content: '\\eaff';
-		}
-		:host([icon='github-alt']):before {
-			content: '\\eb00';
-		}
-		:host([icon='globe']):before {
-			content: '\\eb01';
-		}
-		:host([icon='grabber']):before {
-			content: '\\eb02';
-		}
-		:host([icon='graph']):before {
-			content: '\\eb03';
-		}
-		:host([icon='gripper']):before {
-			content: '\\eb04';
-		}
-		:host([icon='heart']):before {
-			content: '\\eb05';
-		}
-		:host([icon='home']):before {
-			content: '\\eb06';
-		}
-		:host([icon='horizontal-rule']):before {
-			content: '\\eb07';
-		}
-		:host([icon='hubot']):before {
-			content: '\\eb08';
-		}
-		:host([icon='inbox']):before {
-			content: '\\eb09';
-		}
-		:host([icon='issue-reopened']):before {
-			content: '\\eb0b';
-		}
-		:host([icon='issues']):before {
-			content: '\\eb0c';
-		}
-		:host([icon='italic']):before {
-			content: '\\eb0d';
-		}
-		:host([icon='jersey']):before {
-			content: '\\eb0e';
-		}
-		:host([icon='json']):before {
-			content: '\\eb0f';
-		}
-		:host([icon='kebab-vertical']):before {
-			content: '\\eb10';
-		}
-		:host([icon='key']):before {
-			content: '\\eb11';
-		}
-		:host([icon='law']):before {
-			content: '\\eb12';
-		}
-		:host([icon='lightbulb-autofix']):before {
-			content: '\\eb13';
-		}
-		:host([icon='link-external']):before {
-			content: '\\eb14';
-		}
-		:host([icon='link']):before {
-			content: '\\eb15';
-		}
-		:host([icon='list-ordered']):before {
-			content: '\\eb16';
-		}
-		:host([icon='list-unordered']):before {
-			content: '\\eb17';
-		}
-		:host([icon='live-share']):before {
-			content: '\\eb18';
-		}
-		:host([icon='loading']):before {
-			content: '\\eb19';
-		}
-		:host([icon='location']):before {
-			content: '\\eb1a';
-		}
-		:host([icon='mail-read']):before {
-			content: '\\eb1b';
-		}
-		:host([icon='mail']):before {
-			content: '\\eb1c';
-		}
-		:host([icon='markdown']):before {
-			content: '\\eb1d';
-		}
-		:host([icon='megaphone']):before {
-			content: '\\eb1e';
-		}
-		:host([icon='mention']):before {
-			content: '\\eb1f';
-		}
-		:host([icon='milestone']):before {
-			content: '\\eb20';
-		}
-		:host([icon='mortar-board']):before {
-			content: '\\eb21';
-		}
-		:host([icon='move']):before {
-			content: '\\eb22';
-		}
-		:host([icon='multiple-windows']):before {
-			content: '\\eb23';
-		}
-		:host([icon='mute']):before {
-			content: '\\eb24';
-		}
-		:host([icon='no-newline']):before {
-			content: '\\eb25';
-		}
-		:host([icon='note']):before {
-			content: '\\eb26';
-		}
-		:host([icon='octoface']):before {
-			content: '\\eb27';
-		}
-		:host([icon='open-preview']):before {
-			content: '\\eb28';
-		}
-		:host([icon='package']):before {
-			content: '\\eb29';
-		}
-		:host([icon='paintcan']):before {
-			content: '\\eb2a';
-		}
-		:host([icon='pin']):before {
-			content: '\\eb2b';
-		}
-		:host([icon='play']):before {
-			content: '\\eb2c';
-		}
-		:host([icon='run']):before {
-			content: '\\eb2c';
-		}
-		:host([icon='plug']):before {
-			content: '\\eb2d';
-		}
-		:host([icon='preserve-case']):before {
-			content: '\\eb2e';
-		}
-		:host([icon='preview']):before {
-			content: '\\eb2f';
-		}
-		:host([icon='project']):before {
-			content: '\\eb30';
-		}
-		:host([icon='pulse']):before {
-			content: '\\eb31';
-		}
-		:host([icon='question']):before {
-			content: '\\eb32';
-		}
-		:host([icon='quote']):before {
-			content: '\\eb33';
-		}
-		:host([icon='radio-tower']):before {
-			content: '\\eb34';
-		}
-		:host([icon='reactions']):before {
-			content: '\\eb35';
-		}
-		:host([icon='references']):before {
-			content: '\\eb36';
-		}
-		:host([icon='refresh']):before {
-			content: '\\eb37';
-		}
-		:host([icon='regex']):before {
-			content: '\\eb38';
-		}
-		:host([icon='remote-explorer']):before {
-			content: '\\eb39';
-		}
-		:host([icon='remote']):before {
-			content: '\\eb3a';
-		}
-		:host([icon='remove']):before {
-			content: '\\eb3b';
-		}
-		:host([icon='replace-all']):before {
-			content: '\\eb3c';
-		}
-		:host([icon='replace']):before {
-			content: '\\eb3d';
-		}
-		:host([icon='repo-clone']):before {
-			content: '\\eb3e';
-		}
-		:host([icon='repo-force-push']):before {
-			content: '\\eb3f';
-		}
-		:host([icon='repo-pull']):before {
-			content: '\\eb40';
-		}
-		:host([icon='repo-push']):before {
-			content: '\\eb41';
-		}
-		:host([icon='report']):before {
-			content: '\\eb42';
-		}
-		:host([icon='request-changes']):before {
-			content: '\\eb43';
-		}
-		:host([icon='rocket']):before {
-			content: '\\eb44';
-		}
-		:host([icon='root-folder-opened']):before {
-			content: '\\eb45';
-		}
-		:host([icon='root-folder']):before {
-			content: '\\eb46';
-		}
-		:host([icon='rss']):before {
-			content: '\\eb47';
-		}
-		:host([icon='ruby']):before {
-			content: '\\eb48';
-		}
-		:host([icon='save-all']):before {
-			content: '\\eb49';
-		}
-		:host([icon='save-as']):before {
-			content: '\\eb4a';
-		}
-		:host([icon='save']):before {
-			content: '\\eb4b';
-		}
-		:host([icon='screen-full']):before {
-			content: '\\eb4c';
-		}
-		:host([icon='screen-normal']):before {
-			content: '\\eb4d';
-		}
-		:host([icon='search-stop']):before {
-			content: '\\eb4e';
-		}
-		:host([icon='server']):before {
-			content: '\\eb50';
-		}
-		:host([icon='settings-gear']):before {
-			content: '\\eb51';
-		}
-		:host([icon='settings']):before {
-			content: '\\eb52';
-		}
-		:host([icon='shield']):before {
-			content: '\\eb53';
-		}
-		:host([icon='smiley']):before {
-			content: '\\eb54';
-		}
-		:host([icon='sort-precedence']):before {
-			content: '\\eb55';
-		}
-		:host([icon='split-horizontal']):before {
-			content: '\\eb56';
-		}
-		:host([icon='split-vertical']):before {
-			content: '\\eb57';
-		}
-		:host([icon='squirrel']):before {
-			content: '\\eb58';
-		}
-		:host([icon='star-full']):before {
-			content: '\\eb59';
-		}
-		:host([icon='star-half']):before {
-			content: '\\eb5a';
-		}
-		:host([icon='symbol-class']):before {
-			content: '\\eb5b';
-		}
-		:host([icon='symbol-color']):before {
-			content: '\\eb5c';
-		}
-		:host([icon='symbol-constant']):before {
-			content: '\\eb5d';
-		}
-		:host([icon='symbol-enum-member']):before {
-			content: '\\eb5e';
-		}
-		:host([icon='symbol-field']):before {
-			content: '\\eb5f';
-		}
-		:host([icon='symbol-file']):before {
-			content: '\\eb60';
-		}
-		:host([icon='symbol-interface']):before {
-			content: '\\eb61';
-		}
-		:host([icon='symbol-keyword']):before {
-			content: '\\eb62';
-		}
-		:host([icon='symbol-misc']):before {
-			content: '\\eb63';
-		}
-		:host([icon='symbol-operator']):before {
-			content: '\\eb64';
-		}
-		:host([icon='symbol-property']):before {
-			content: '\\eb65';
-		}
-		:host([icon='wrench']):before {
-			content: '\\eb65';
-		}
-		:host([icon='wrench-subaction']):before {
-			content: '\\eb65';
-		}
-		:host([icon='symbol-snippet']):before {
-			content: '\\eb66';
-		}
-		:host([icon='tasklist']):before {
-			content: '\\eb67';
-		}
-		:host([icon='telescope']):before {
-			content: '\\eb68';
-		}
-		:host([icon='text-size']):before {
-			content: '\\eb69';
-		}
-		:host([icon='three-bars']):before {
-			content: '\\eb6a';
-		}
-		:host([icon='thumbsdown']):before {
-			content: '\\eb6b';
-		}
-		:host([icon='thumbsup']):before {
-			content: '\\eb6c';
-		}
-		:host([icon='tools']):before {
-			content: '\\eb6d';
-		}
-		:host([icon='triangle-down']):before {
-			content: '\\eb6e';
-		}
-		:host([icon='triangle-left']):before {
-			content: '\\eb6f';
-		}
-		:host([icon='triangle-right']):before {
-			content: '\\eb70';
-		}
-		:host([icon='triangle-up']):before {
-			content: '\\eb71';
-		}
-		:host([icon='twitter']):before {
-			content: '\\eb72';
-		}
-		:host([icon='unfold']):before {
-			content: '\\eb73';
-		}
-		:host([icon='unlock']):before {
-			content: '\\eb74';
-		}
-		:host([icon='unmute']):before {
-			content: '\\eb75';
-		}
-		:host([icon='unverified']):before {
-			content: '\\eb76';
-		}
-		:host([icon='verified']):before {
-			content: '\\eb77';
-		}
-		:host([icon='versions']):before {
-			content: '\\eb78';
-		}
-		:host([icon='vm-active']):before {
-			content: '\\eb79';
-		}
-		:host([icon='vm-outline']):before {
-			content: '\\eb7a';
-		}
-		:host([icon='vm-running']):before {
-			content: '\\eb7b';
-		}
-		:host([icon='watch']):before {
-			content: '\\eb7c';
-		}
-		:host([icon='whitespace']):before {
-			content: '\\eb7d';
-		}
-		:host([icon='whole-word']):before {
-			content: '\\eb7e';
-		}
-		:host([icon='window']):before {
-			content: '\\eb7f';
-		}
-		:host([icon='word-wrap']):before {
-			content: '\\eb80';
-		}
-		:host([icon='zoom-in']):before {
-			content: '\\eb81';
-		}
-		:host([icon='zoom-out']):before {
-			content: '\\eb82';
-		}
-		:host([icon='list-filter']):before {
-			content: '\\eb83';
-		}
-		:host([icon='list-flat']):before {
-			content: '\\eb84';
-		}
-		:host([icon='list-selection']):before {
-			content: '\\eb85';
-		}
-		:host([icon='selection']):before {
-			content: '\\eb85';
-		}
-		:host([icon='list-tree']):before {
-			content: '\\eb86';
-		}
-		:host([icon='debug-breakpoint-function-unverified']):before {
-			content: '\\eb87';
-		}
-		:host([icon='debug-breakpoint-function']):before {
-			content: '\\eb88';
-		}
-		:host([icon='debug-breakpoint-function-disabled']):before {
-			content: '\\eb88';
-		}
-		:host([icon='debug-stackframe-active']):before {
-			content: '\\eb89';
-		}
-		:host([icon='debug-stackframe-dot']):before {
-			content: '\\eb8a';
-		}
-		:host([icon='debug-stackframe']):before {
-			content: '\\eb8b';
-		}
-		:host([icon='debug-stackframe-focused']):before {
-			content: '\\eb8b';
-		}
-		:host([icon='debug-breakpoint-unsupported']):before {
-			content: '\\eb8c';
-		}
-		:host([icon='symbol-string']):before {
-			content: '\\eb8d';
-		}
-		:host([icon='debug-reverse-continue']):before {
-			content: '\\eb8e';
-		}
-		:host([icon='debug-step-back']):before {
-			content: '\\eb8f';
-		}
-		:host([icon='debug-restart-frame']):before {
-			content: '\\eb90';
-		}
-		:host([icon='debug-alt']):before {
-			content: '\\eb91';
-		}
-		:host([icon='call-incoming']):before {
-			content: '\\eb92';
-		}
-		:host([icon='call-outgoing']):before {
-			content: '\\eb93';
-		}
-		:host([icon='menu']):before {
-			content: '\\eb94';
-		}
-		:host([icon='expand-all']):before {
-			content: '\\eb95';
-		}
-		:host([icon='feedback']):before {
-			content: '\\eb96';
-		}
-		:host([icon='group-by-ref-type']):before {
-			content: '\\eb97';
-		}
-		:host([icon='ungroup-by-ref-type']):before {
-			content: '\\eb98';
-		}
-		:host([icon='account']):before {
-			content: '\\eb99';
-		}
-		:host([icon='bell-dot']):before {
-			content: '\\eb9a';
-		}
-		:host([icon='debug-console']):before {
-			content: '\\eb9b';
-		}
-		:host([icon='library']):before {
-			content: '\\eb9c';
-		}
-		:host([icon='output']):before {
-			content: '\\eb9d';
-		}
-		:host([icon='run-all']):before {
-			content: '\\eb9e';
-		}
-		:host([icon='sync-ignored']):before {
-			content: '\\eb9f';
-		}
-		:host([icon='pinned']):before {
-			content: '\\eba0';
-		}
-		:host([icon='github-inverted']):before {
-			content: '\\eba1';
-		}
-		:host([icon='server-process']):before {
-			content: '\\eba2';
-		}
-		:host([icon='server-environment']):before {
-			content: '\\eba3';
-		}
-		:host([icon='pass']):before {
-			content: '\\eba4';
-		}
-		:host([icon='issue-closed']):before {
-			content: '\\eba4';
-		}
-		:host([icon='stop-circle']):before {
-			content: '\\eba5';
-		}
-		:host([icon='play-circle']):before {
-			content: '\\eba6';
-		}
-		:host([icon='record']):before {
-			content: '\\eba7';
-		}
-		:host([icon='debug-alt-small']):before {
-			content: '\\eba8';
-		}
-		:host([icon='vm-connect']):before {
-			content: '\\eba9';
-		}
-		:host([icon='cloud']):before {
-			content: '\\ebaa';
-		}
-		:host([icon='merge']):before {
-			content: '\\ebab';
-		}
-		:host([icon='export']):before {
-			content: '\\ebac';
-		}
-		:host([icon='graph-left']):before {
-			content: '\\ebad';
-		}
-		:host([icon='magnet']):before {
-			content: '\\ebae';
-		}
-		:host([icon='notebook']):before {
-			content: '\\ebaf';
-		}
-		:host([icon='redo']):before {
-			content: '\\ebb0';
-		}
-		:host([icon='check-all']):before {
-			content: '\\ebb1';
-		}
-		:host([icon='pinned-dirty']):before {
-			content: '\\ebb2';
-		}
-		:host([icon='pass-filled']):before {
-			content: '\\ebb3';
-		}
-		:host([icon='circle-large-filled']):before {
-			content: '\\ebb4';
-		}
-		:host([icon='circle-large-outline']):before {
-			content: '\\ebb5';
-		}
-		:host([icon='combine']):before {
-			content: '\\ebb6';
-		}
-		:host([icon='gather']):before {
-			content: '\\ebb6';
-		}
-		:host([icon='table']):before {
-			content: '\\ebb7';
-		}
-		:host([icon='variable-group']):before {
-			content: '\\ebb8';
-		}
-		:host([icon='type-hierarchy']):before {
-			content: '\\ebb9';
-		}
-		:host([icon='type-hierarchy-sub']):before {
-			content: '\\ebba';
-		}
-		:host([icon='type-hierarchy-super']):before {
-			content: '\\ebbb';
-		}
-		:host([icon='git-pull-request-create']):before {
-			content: '\\ebbc';
-		}
-		:host([icon='run-above']):before {
-			content: '\\ebbd';
-		}
-		:host([icon='run-below']):before {
-			content: '\\ebbe';
-		}
-		:host([icon='notebook-template']):before {
-			content: '\\ebbf';
-		}
-		:host([icon='debug-rerun']):before {
-			content: '\\ebc0';
-		}
-		:host([icon='workspace-trusted']):before {
-			content: '\\ebc1';
-		}
-		:host([icon='workspace-untrusted']):before {
-			content: '\\ebc2';
-		}
-		:host([icon='workspace-unknown']):before {
-			content: '\\ebc3';
-		}
-		:host([icon='terminal-cmd']):before {
-			content: '\\ebc4';
-		}
-		:host([icon='terminal-debian']):before {
-			content: '\\ebc5';
-		}
-		:host([icon='terminal-linux']):before {
-			content: '\\ebc6';
-		}
-		:host([icon='terminal-powershell']):before {
-			content: '\\ebc7';
-		}
-		:host([icon='terminal-tmux']):before {
-			content: '\\ebc8';
-		}
-		:host([icon='terminal-ubuntu']):before {
-			content: '\\ebc9';
-		}
-		:host([icon='terminal-bash']):before {
-			content: '\\ebca';
-		}
-		:host([icon='arrow-swap']):before {
-			content: '\\ebcb';
-		}
-		:host([icon='copy']):before {
-			content: '\\ebcc';
-		}
-		:host([icon='person-add']):before {
-			content: '\\ebcd';
-		}
-		:host([icon='filter-filled']):before {
-			content: '\\ebce';
-		}
-		:host([icon='wand']):before {
-			content: '\\ebcf';
-		}
-		:host([icon='debug-line-by-line']):before {
-			content: '\\ebd0';
-		}
-		:host([icon='inspect']):before {
-			content: '\\ebd1';
-		}
-		:host([icon='layers']):before {
-			content: '\\ebd2';
-		}
-		:host([icon='layers-dot']):before {
-			content: '\\ebd3';
-		}
-		:host([icon='layers-active']):before {
-			content: '\\ebd4';
-		}
-		:host([icon='compass']):before {
-			content: '\\ebd5';
-		}
-		:host([icon='compass-dot']):before {
-			content: '\\ebd6';
-		}
-		:host([icon='compass-active']):before {
-			content: '\\ebd7';
-		}
-		:host([icon='azure']):before {
-			content: '\\ebd8';
-		}
-		:host([icon='issue-draft']):before {
-			content: '\\ebd9';
-		}
-		:host([icon='git-pull-request-closed']):before {
-			content: '\\ebda';
-		}
-		:host([icon='git-pull-request-draft']):before {
-			content: '\\ebdb';
-		}
-		:host([icon='debug-all']):before {
-			content: '\\ebdc';
-		}
-		:host([icon='debug-coverage']):before {
-			content: '\\ebdd';
-		}
-		:host([icon='run-errors']):before {
-			content: '\\ebde';
-		}
-		:host([icon='folder-library']):before {
-			content: '\\ebdf';
-		}
-		:host([icon='debug-continue-small']):before {
-			content: '\\ebe0';
-		}
-		:host([icon='beaker-stop']):before {
-			content: '\\ebe1';
-		}
-		:host([icon='graph-line']):before {
-			content: '\\ebe2';
-		}
-		:host([icon='graph-scatter']):before {
-			content: '\\ebe3';
-		}
-		:host([icon='pie-chart']):before {
-			content: '\\ebe4';
-		}
-		:host([icon='bracket']):before {
-			content: '\\eb0f';
-		}
-		:host([icon='bracket-dot']):before {
-			content: '\\ebe5';
-		}
-		:host([icon='bracket-error']):before {
-			content: '\\ebe6';
-		}
-		:host([icon='lock-small']):before {
-			content: '\\ebe7';
-		}
-		:host([icon='azure-devops']):before {
-			content: '\\ebe8';
-		}
-		:host([icon='verified-filled']):before {
-			content: '\\ebe9';
-		}
-		:host([icon='newline']):before {
-			content: '\\ebea';
-		}
-		:host([icon='layout']):before {
-			content: '\\ebeb';
-		}
-		:host([icon='layout-activitybar-left']):before {
-			content: '\\ebec';
-		}
-		:host([icon='layout-activitybar-right']):before {
-			content: '\\ebed';
-		}
-		:host([icon='layout-panel-left']):before {
-			content: '\\ebee';
-		}
-		:host([icon='layout-panel-center']):before {
-			content: '\\ebef';
-		}
-		:host([icon='layout-panel-justify']):before {
-			content: '\\ebf0';
-		}
-		:host([icon='layout-panel-right']):before {
-			content: '\\ebf1';
-		}
-		:host([icon='layout-panel']):before {
-			content: '\\ebf2';
-		}
-		:host([icon='layout-sidebar-left']):before {
-			content: '\\ebf3';
-		}
-		:host([icon='layout-sidebar-right']):before {
-			content: '\\ebf4';
-		}
-		:host([icon='layout-statusbar']):before {
-			content: '\\ebf5';
-		}
-		:host([icon='layout-menubar']):before {
-			content: '\\ebf6';
-		}
-		:host([icon='layout-centered']):before {
-			content: '\\ebf7';
-		}
-		:host([icon='target']):before {
-			content: '\\ebf8';
-		}
-		:host([icon='pinned-filled']):before {
-			font-family: 'glicons';
-			content: '\\f11c';
-			position: relative;
-			left: 1px;
-		}
-		:host([icon='graph']):before {
-			font-family: 'glicons';
-			content: '\\f102';
-		}
-
-		@keyframes codicon-spin {
-			100% {
-				transform: rotate(360deg);
-			}
-		}
-
-		:host([modifier='spin']) {
-			/* Use steps to throttle FPS to reduce CPU usage */
-			animation: codicon-spin 1.5s steps(30) infinite;
-		}
-		:host([icon='loading'][modifier='spin']) {
-			/* Use steps to throttle FPS to reduce CPU usage */
-			animation: codicon-spin 1.5s steps(30) infinite;
-
-			/* custom speed & easing for loading icon */
-			animation-duration: 1s !important;
-			animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;
-		}
-	`;
-
-	@property()
-	icon = '';
-
-	@property()
-	modifier = '';
-
-	override render() {
-		return html``;
-	}
-}
diff --git a/src/webviews/apps/shared/components/commit/commit-stats.ts b/src/webviews/apps/shared/components/commit/commit-stats.ts
index 20dcbcc..844f71b 100644
--- a/src/webviews/apps/shared/components/commit/commit-stats.ts
+++ b/src/webviews/apps/shared/components/commit/commit-stats.ts
@@ -1,6 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import '../codicon';
+import '../code-icon';
 
 @customElement('commit-stats')
 export class CommitStats extends LitElement {
diff --git a/src/webviews/apps/shared/components/commit/file-change-item.ts b/src/webviews/apps/shared/components/commit/file-change-item.ts
index b259530..da20e17 100644
--- a/src/webviews/apps/shared/components/commit/file-change-item.ts
+++ b/src/webviews/apps/shared/components/commit/file-change-item.ts
@@ -1,7 +1,7 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { FileShowOptions } from '../../../../commitDetails/protocol';
-import '../codicon';
+import '../code-icon';
 
 export interface FileChangeItemEventDetail {
 	path: string;
diff --git a/src/webviews/apps/shared/components/list/file-change-list-item.ts b/src/webviews/apps/shared/components/list/file-change-list-item.ts
index d90b6dc..8e8867c 100644
--- a/src/webviews/apps/shared/components/list/file-change-list-item.ts
+++ b/src/webviews/apps/shared/components/list/file-change-list-item.ts
@@ -3,7 +3,7 @@ import type { TextDocumentShowOptions } from 'vscode';
 import { numberConverter } from '../converters/number-converter';
 import type { ListItem } from './list-item';
 import './list-item';
-import '../codicon';
+import '../code-icon';
 
 export interface FileChangeListItemDetail {
 	path: string;
diff --git a/src/webviews/apps/shared/components/list/list-item.ts b/src/webviews/apps/shared/components/list/list-item.ts
index 5e1f957..e4428d3 100644
--- a/src/webviews/apps/shared/components/list/list-item.ts
+++ b/src/webviews/apps/shared/components/list/list-item.ts
@@ -1,7 +1,7 @@
 import { attr, css, customElement, FASTElement, html, repeat, volatile, when } from '@microsoft/fast-element';
 import type { TextDocumentShowOptions } from 'vscode';
 import { numberConverter } from '../converters/number-converter';
-import '../codicon';
+import '../code-icon';
 
 declare global {
 	interface HTMLElementEventMap {
diff --git a/src/webviews/apps/shared/components/rich/issue-pull-request.ts b/src/webviews/apps/shared/components/rich/issue-pull-request.ts
index 5342113..a2b4f9a 100644
--- a/src/webviews/apps/shared/components/rich/issue-pull-request.ts
+++ b/src/webviews/apps/shared/components/rich/issue-pull-request.ts
@@ -1,7 +1,7 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import '../formatted-date';
-import '../codicon';
+import '../code-icon';
 
 @customElement('issue-pull-request')
 export class IssuePullRequest extends LitElement {
diff --git a/src/webviews/apps/shared/components/search/search-box.ts b/src/webviews/apps/shared/components/search/search-box.ts
index ae4b505..32d6dd8 100644
--- a/src/webviews/apps/shared/components/search/search-box.ts
+++ b/src/webviews/apps/shared/components/search/search-box.ts
@@ -4,7 +4,7 @@ import { pluralize } from '../../../../../system/string';
 import type { Disposable } from '../../dom';
 import { DOM } from '../../dom';
 import { numberConverter } from '../converters/number-converter';
-import '../codicon';
+import '../code-icon';
 import type { SearchInput } from './search-input';
 import './search-input';
 import './../progress';
diff --git a/src/webviews/apps/shared/components/search/search-input.ts b/src/webviews/apps/shared/components/search/search-input.ts
index fd205aa..3038ba3 100644
--- a/src/webviews/apps/shared/components/search/search-input.ts
+++ b/src/webviews/apps/shared/components/search/search-input.ts
@@ -1,7 +1,7 @@
 import { attr, css, customElement, FASTElement, html, observable, ref, volatile, when } from '@microsoft/fast-element';
 import type { SearchQuery } from '../../../../../git/search';
 import { debounce } from '../../../../../system/function';
-import '../codicon';
+import '../code-icon';
 
 export type SearchOperators =
 	| '=:'
diff --git a/src/webviews/apps/shared/components/webview-pane.ts b/src/webviews/apps/shared/components/webview-pane.ts
index 7c81024..8bbccae 100644
--- a/src/webviews/apps/shared/components/webview-pane.ts
+++ b/src/webviews/apps/shared/components/webview-pane.ts
@@ -1,6 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import './codicon';
+import './code-icon';
 import './actions/action-nav';
 
 export interface WebviewPaneExpandedChangeEventDetail {