codicon definitions in browser/ui/codicon/codicon

build/gulpfile.editor.js

@@ -43,7 +43,7 @@ let editorEntryPoints = [
 ];
 
 let editorResources = [
-	'out-editor-build/vs/base/browser/ui/codiconLabel/**/*.ttf'
+	'out-editor-build/vs/base/browser/ui/codicons/**/*.ttf'
 ];
 
 let BUNDLED_FILE_HEADER = [

build/gulpfile.vscode.js

@@ -65,7 +65,7 @@ const vscodeResources = [
 	'out-build/vs/base/common/performance.js',
 	'out-build/vs/base/node/languagePacks.js',
 	'out-build/vs/base/node/{stdForkStart.js,terminateProcess.sh,cpuUsage.sh,ps.sh}',
-	'out-build/vs/base/browser/ui/codiconLabel/codicon/**',
+	'out-build/vs/base/browser/ui/codicons/codicon/**',
 	'out-build/vs/workbench/browser/media/*-theme.css',
 	'out-build/vs/workbench/contrib/debug/**/*.json',
 	'out-build/vs/workbench/contrib/externalTerminal/**/*.scpt',

src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.css

@@ -25,7 +25,7 @@
 	outline: none;
 }
 
-.monaco-breadcrumbs .monaco-breadcrumb-item .codicon-chevron-right {
+.monaco-breadcrumbs .monaco-breadcrumb-item .codicon-breadcrumb-separator {
 	color: inherit;
 }
 

src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts

@@ -11,6 +11,7 @@ import { Color } from 'vs/base/common/color';
 import { Emitter, Event } from 'vs/base/common/event';
 import { dispose, IDisposable, DisposableStore } from 'vs/base/common/lifecycle';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
+import { Codicon, registerIcon } from 'vs/base/browser/ui/codicons/codicons';
 import 'vs/css!./breadcrumbsWidget';
 
 export abstract class BreadcrumbsItem {
@@ -55,6 +56,8 @@ export interface IBreadcrumbsItemEvent {
 	payload: any;
 }
 
+const breadcrumbSeparatorIcon = registerIcon('breadcrumb-separator', Codicon.chevronRight);
+
 export class BreadcrumbsWidget {
 
 	private readonly _disposables = new DisposableStore();
@@ -336,7 +339,7 @@ export class BreadcrumbsWidget {
 		container.tabIndex = -1;
 		container.setAttribute('role', 'listitem');
 		dom.addClasses(container, 'monaco-breadcrumb-item');
-		const iconContainer = dom.$('.codicon.codicon-chevron-right');
+		const iconContainer = dom.$(breadcrumbSeparatorIcon.cssSelector);
 		container.appendChild(iconContainer);
 	}
 

src/vs/base/browser/ui/checkbox/checkbox.ts

@@ -10,12 +10,13 @@ import { Widget } from 'vs/base/browser/ui/widget';
 import { Color } from 'vs/base/common/color';
 import { Emitter, Event } from 'vs/base/common/event';
 import { KeyCode } from 'vs/base/common/keyCodes';
-import * as objects from 'vs/base/common/objects';
 import { BaseActionViewItem } from 'vs/base/browser/ui/actionbar/actionbar';
 import { DisposableStore } from 'vs/base/common/lifecycle';
+import { Codicon } from 'vs/base/browser/ui/codicons/codicons';
 
 export interface ICheckboxOpts extends ICheckboxStyles {
 	readonly actionClassName?: string;
+	readonly icon?: Codicon;
 	readonly title: string;
 	readonly isChecked: boolean;
 }
@@ -93,13 +94,23 @@ export class Checkbox extends Widget {
 	constructor(opts: ICheckboxOpts) {
 		super();
 
-		this._opts = objects.deepClone(opts);
-		objects.mixin(this._opts, defaultOpts, false);
+		this._opts = { ...defaultOpts, ...opts };
 		this._checked = this._opts.isChecked;
 
+		const classes = ['monaco-custom-checkbox'];
+		if (this._opts.icon) {
+			classes.push(this._opts.icon.className);
+		} else {
+			classes.push('codicon'); // todo: remove once codicon fully adopted
+		}
+		if (this._opts.actionClassName) {
+			classes.push(this._opts.actionClassName);
+		}
+		classes.push(this._checked ? 'checked' : 'unchecked');
+
 		this.domNode = document.createElement('div');
 		this.domNode.title = this._opts.title;
-		this.domNode.className = 'monaco-custom-checkbox codicon ' + (this._opts.actionClassName || '') + ' ' + (this._checked ? 'checked' : 'unchecked');
+		this.domNode.className = classes.join(' ');
 		this.domNode.tabIndex = 0;
 		this.domNode.setAttribute('role', 'checkbox');
 		this.domNode.setAttribute('aria-checked', String(this._checked));
@@ -192,7 +203,7 @@ export class SimpleCheckbox extends Widget {
 	constructor(private title: string, private isChecked: boolean) {
 		super();
 
-		this.checkbox = new Checkbox({ title: this.title, isChecked: this.isChecked, actionClassName: 'monaco-simple-checkbox codicon-check' });
+		this.checkbox = new Checkbox({ title: this.title, isChecked: this.isChecked, icon: Codicon.check, actionClassName: 'monaco-simple-checkbox' });
 
 		this.domNode = this.checkbox.domNode;
 

src/vs/base/browser/ui/codiconLabel/codicon/codicon.css → src/vs/base/browser/ui/codicons/codicon/codicon.css

@@ -82,6 +82,7 @@
 .codicon-git-fork-private:before { content: "\ea75" }
 .codicon-lock:before { content: "\ea75" }
 .codicon-mirror-private:before { content: "\ea75" }
+.codicon-list-close:before,
 .codicon-close:before { content: "\ea76" }
 .codicon-remove-close:before { content: "\ea76" }
 .codicon-x:before { content: "\ea76" }
@@ -95,6 +96,8 @@
 .codicon-device-desktop:before { content: "\ea7a" }
 .codicon-file:before { content: "\ea7b" }
 .codicon-file-text:before { content: "\ea7b" }
+.codicon-toolbar-more:before,
+.codicon-menubar-more:before,
 .codicon-more:before { content: "\ea7c" }
 .codicon-ellipsis:before { content: "\ea7c" }
 .codicon-kebab-horizontal:before { content: "\ea7c" }
@@ -181,10 +184,15 @@
 .codicon-bug:before { content: "\eaaf" }
 .codicon-calendar:before { content: "\eab0" }
 .codicon-case-sensitive:before { content: "\eab1" }
+
+.codicon-menu-selection:before,
 .codicon-check:before { content: "\eab2" }
 .codicon-checklist:before { content: "\eab3" }
 .codicon-chevron-down:before { content: "\eab4" }
 .codicon-chevron-left:before { content: "\eab5" }
+
+.codicon-menu-submenu:before,
+.codicon-breadcrumb-separator:before,
 .codicon-chevron-right:before { content: "\eab6" }
 .codicon-chevron-up:before { content: "\eab7" }
 .codicon-chrome-close:before { content: "\eab8" }
@@ -370,9 +378,13 @@
 .codicon-thumbsdown:before { content: "\eb6b" }
 .codicon-thumbsup:before { content: "\eb6c" }
 .codicon-tools:before { content: "\eb6d" }
+.codicon-scrollbar-button-down:before,
 .codicon-triangle-down:before { content: "\eb6e" }
+.codicon-scrollbar-button-left:before,
 .codicon-triangle-left:before { content: "\eb6f" }
+.codicon-scrollbar-button-right:before,
 .codicon-triangle-right:before { content: "\eb70" }
+.codicon-scrollbar-button-up:before,
 .codicon-triangle-up:before { content: "\eb71" }
 .codicon-twitter:before { content: "\eb72" }
 .codicon-unfold:before { content: "\eb73" }
@@ -393,7 +405,10 @@
 .codicon-zoom-out:before { content: "\eb82" }
 .codicon-list-filter:before { content: "\eb83" }
 .codicon-list-flat:before { content: "\eb84" }
+.codicon-search-show-context:before,
 .codicon-list-selection:before { content: "\eb85" }
+
+.codicon-find-selection:before,
 .codicon-selection:before { content: "\eb85" }
 .codicon-list-tree:before { content: "\eb86" }
 .codicon-debug-breakpoint-function-unverified:before { content: "\eb87" }

src/vs/base/browser/ui/codiconLabel/codiconLabel.ts → src/vs/base/browser/ui/codicons/codiconLabel.ts

@@ -3,9 +3,6 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import 'vs/css!./codicon/codicon';
-import 'vs/css!./codicon/codicon-modifications';
-import 'vs/css!./codicon/codicon-animations';
 import { escape } from 'vs/base/common/strings';
 import { renderCodicons } from 'vs/base/common/codicons';
 

src/vs/base/browser/ui/dropdown/dropdown.ts

@@ -295,7 +295,7 @@ export class DropdownMenuActionViewItem extends BaseActionViewItem {
 
 	render(container: HTMLElement): void {
 		const labelRenderer: ILabelRenderer = (el: HTMLElement): IDisposable | null => {
-			this.element = append(el, $('a.action-label.codicon'));
+			this.element = append(el, $('a.action-label.codicon')); // TODO: remove codicon, should come through `this.clazz`
 			if (this.clazz) {
 				addClasses(this.element, this.clazz);
 			}

src/vs/base/browser/ui/findinput/findInputCheckboxes.ts

@@ -6,6 +6,7 @@
 import { Checkbox } from 'vs/base/browser/ui/checkbox/checkbox';
 import { Color } from 'vs/base/common/color';
 import * as nls from 'vs/nls';
+import { Codicon } from 'vs/base/browser/ui/codicons/codicons';
 
 export interface IFindInputCheckboxOpts {
 	readonly appendTitle: string;
@@ -21,7 +22,7 @@ const NLS_REGEX_CHECKBOX_LABEL = nls.localize('regexDescription', "Use Regular E
 export class CaseSensitiveCheckbox extends Checkbox {
 	constructor(opts: IFindInputCheckboxOpts) {
 		super({
-			actionClassName: 'codicon-case-sensitive',
+			icon: Codicon.caseSensitive,
 			title: NLS_CASE_SENSITIVE_CHECKBOX_LABEL + opts.appendTitle,
 			isChecked: opts.isChecked,
 			inputActiveOptionBorder: opts.inputActiveOptionBorder,
@@ -33,7 +34,7 @@ export class CaseSensitiveCheckbox extends Checkbox {
 export class WholeWordsCheckbox extends Checkbox {
 	constructor(opts: IFindInputCheckboxOpts) {
 		super({
-			actionClassName: 'codicon-whole-word',
+			icon: Codicon.wholeWord,
 			title: NLS_WHOLE_WORD_CHECKBOX_LABEL + opts.appendTitle,
 			isChecked: opts.isChecked,
 			inputActiveOptionBorder: opts.inputActiveOptionBorder,
@@ -45,7 +46,7 @@ export class WholeWordsCheckbox extends Checkbox {
 export class RegexCheckbox extends Checkbox {
 	constructor(opts: IFindInputCheckboxOpts) {
 		super({
-			actionClassName: 'codicon-regex',
+			icon: Codicon.regex,
 			title: NLS_REGEX_CHECKBOX_LABEL + opts.appendTitle,
 			isChecked: opts.isChecked,
 			inputActiveOptionBorder: opts.inputActiveOptionBorder,

src/vs/base/browser/ui/findinput/replaceInput.ts

@@ -17,6 +17,7 @@ import { KeyCode } from 'vs/base/common/keyCodes';
 import { Color } from 'vs/base/common/color';
 import { ICheckboxStyles, Checkbox } from 'vs/base/browser/ui/checkbox/checkbox';
 import { IFindInputCheckboxOpts } from 'vs/base/browser/ui/findinput/findInputCheckboxes';
+import { Codicon } from 'vs/base/browser/ui/codicons/codicons';
 
 export interface IReplaceInputOptions extends IReplaceInputStyles {
 	readonly placeholder?: string;
@@ -42,7 +43,7 @@ export class PreserveCaseCheckbox extends Checkbox {
 	constructor(opts: IFindInputCheckboxOpts) {
 		super({
 			// TODO: does this need its own icon?
-			actionClassName: 'codicon-preserve-case',
+			icon: Codicon.preserveCase,
 			title: NLS_PRESERVE_CASE_LABEL + opts.appendTitle,
 			isChecked: opts.isChecked,
 			inputActiveOptionBorder: opts.inputActiveOptionBorder,

src/vs/base/browser/ui/menu/menu.ts

@@ -20,10 +20,14 @@ import { Event } from 'vs/base/common/event';
 import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
 import { isLinux, isMacintosh } from 'vs/base/common/platform';
 import { stripCodicons } from 'vs/base/common/codicons';
+import { Codicon, registerIcon } from 'vs/base/browser/ui/codicons/codicons';
 
 export const MENU_MNEMONIC_REGEX = /\(&([^\s&])\)|(^|[^&])&([^\s&])/;
 export const MENU_ESCAPED_MNEMONIC_REGEX = /(&)?(&)([^\s&])/g;
 
+const menuSelectionIcon = registerIcon('menu-selection', Codicon.chevronRight);
+const menuSubmenuIcon = registerIcon('menu-submenu', Codicon.check);
+
 export enum Direction {
 	Right,
 	Left
@@ -423,7 +427,7 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
 			}
 		}
 
-		this.check = append(this.item, $('span.menu-item-check.codicon.codicon-check'));
+		this.check = append(this.item, $(menuSelectionIcon.cssSelector));
 		this.check.setAttribute('role', 'none');
 
 		this.label = append(this.item, $('span.action-label'));
@@ -670,7 +674,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
 			addClass(this.item, 'monaco-submenu-item');
 			this.item.setAttribute('aria-haspopup', 'true');
 			this.updateAriaExpanded('false');
-			this.submenuIndicator = append(this.item, $('span.submenu-indicator.codicon.codicon-chevron-right'));
+			this.submenuIndicator = append(this.item, $('span.submenu-indicator' + menuSubmenuIcon.cssSelector));
 			this.submenuIndicator.setAttribute('aria-hidden', 'true');
 		}
 

src/vs/base/browser/ui/menu/menubar.ts

@@ -22,9 +22,12 @@ import { ScanCodeUtils, ScanCode } from 'vs/base/common/scanCode';
 import { isMacintosh } from 'vs/base/common/platform';
 import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
 import { Separator } from 'vs/base/browser/ui/actionbar/actionbar';
+import { Codicon, registerIcon } from 'vs/base/browser/ui/codicons/codicons';
 
 const $ = DOM.$;
 
+const menuBarMoreIcon = registerIcon('menubar-more', Codicon.more);
+
 export interface IMenuBarOptions {
 	enableMnemonics?: boolean;
 	disableAltFocus?: boolean;
@@ -313,7 +316,7 @@ export class MenuBar extends Disposable {
 		const label = this.options.compactMode !== undefined ? nls.localize('mAppMenu', 'Application Menu') : nls.localize('mMore', 'More');
 		const title = this.options.compactMode !== undefined ? label : undefined;
 		const buttonElement = $('div.menubar-menu-button', { 'role': 'menuitem', 'tabindex': -1, 'aria-label': label, 'title': title, 'aria-haspopup': true });
-		const titleElement = $('div.menubar-menu-title.toolbar-toggle-more.codicon.codicon-more', { 'role': 'none', 'aria-hidden': true });
+		const titleElement = $('div.menubar-menu-title.toolbar-toggle-more' + menuBarMoreIcon.cssSelector, { 'role': 'none', 'aria-hidden': true });
 
 		buttonElement.appendChild(titleElement);
 		this.container.appendChild(buttonElement);

src/vs/base/browser/ui/scrollbar/horizontalScrollbar.ts

@@ -9,6 +9,11 @@ import { ScrollableElementResolvedOptions } from 'vs/base/browser/ui/scrollbar/s
 import { ARROW_IMG_SIZE } from 'vs/base/browser/ui/scrollbar/scrollbarArrow';
 import { ScrollbarState } from 'vs/base/browser/ui/scrollbar/scrollbarState';
 import { INewScrollPosition, ScrollEvent, Scrollable, ScrollbarVisibility } from 'vs/base/common/scrollable';
+import { Codicon, registerIcon } from 'vs/base/browser/ui/codicons/codicons';
+
+
+export const scrollbarButtonLeftIcon = registerIcon('scrollbar-button-left', Codicon.triangleLeft);
+export const scrollbarButtonRightIcon = registerIcon('scrollbar-button-right', Codicon.triangleRight);
 
 export class HorizontalScrollbar extends AbstractScrollbar {
 
@@ -36,7 +41,8 @@ export class HorizontalScrollbar extends AbstractScrollbar {
 			let scrollbarDelta = (options.horizontalScrollbarSize - ARROW_IMG_SIZE) / 2;
 
 			this._createArrow({
-				className: 'scra codicon codicon-triangle-left',
+				className: 'scra',
+				icon: scrollbarButtonLeftIcon,
 				top: scrollbarDelta,
 				left: arrowDelta,
 				bottom: undefined,
@@ -47,7 +53,8 @@ export class HorizontalScrollbar extends AbstractScrollbar {
 			});
 
 			this._createArrow({
-				className: 'scra codicon codicon-triangle-right',
+				className: 'scra',
+				icon: scrollbarButtonRightIcon,
 				top: scrollbarDelta,
 				left: undefined,
 				bottom: undefined,

src/vs/base/browser/ui/scrollbar/scrollbarArrow.ts

@@ -7,6 +7,8 @@ import { GlobalMouseMoveMonitor, IStandardMouseMoveEventData, standardMouseMoveM
 import { IMouseEvent } from 'vs/base/browser/mouseEvent';
 import { Widget } from 'vs/base/browser/ui/widget';
 import { IntervalTimer, TimeoutTimer } from 'vs/base/common/async';
+import { Codicon } from 'vs/base/browser/ui/codicons/codicons';
+import { addClasses } from 'vs/base/browser/dom';
 
 /**
  * The arrow image size.
@@ -16,6 +18,7 @@ export const ARROW_IMG_SIZE = 11;
 export interface ScrollbarArrowOptions {
 	onActivate: () => void;
 	className: string;
+	icon: Codicon;
 
 	bgWidth: number;
 	bgHeight: number;
@@ -59,6 +62,8 @@ export class ScrollbarArrow extends Widget {
 
 		this.domNode = document.createElement('div');
 		this.domNode.className = opts.className;
+		addClasses(this.domNode, opts.icon.className);
+
 		this.domNode.style.position = 'absolute';
 		this.domNode.style.width = ARROW_IMG_SIZE + 'px';
 		this.domNode.style.height = ARROW_IMG_SIZE + 'px';

src/vs/base/browser/ui/scrollbar/verticalScrollbar.ts

@@ -9,6 +9,10 @@ import { ScrollableElementResolvedOptions } from 'vs/base/browser/ui/scrollbar/s
 import { ARROW_IMG_SIZE } from 'vs/base/browser/ui/scrollbar/scrollbarArrow';
 import { ScrollbarState } from 'vs/base/browser/ui/scrollbar/scrollbarState';
 import { INewScrollPosition, ScrollEvent, Scrollable, ScrollbarVisibility } from 'vs/base/common/scrollable';
+import { Codicon, registerIcon } from 'vs/base/browser/ui/codicons/codicons';
+
+export const scrollbarButtonUpIcon = registerIcon('scrollbar-button-up', Codicon.triangleUp);
+export const scrollbarButtonDownIcon = registerIcon('scrollbar-button-down', Codicon.triangleDown);
 
 export class VerticalScrollbar extends AbstractScrollbar {
 
@@ -37,7 +41,8 @@ export class VerticalScrollbar extends AbstractScrollbar {
 			let scrollbarDelta = (options.verticalScrollbarSize - ARROW_IMG_SIZE) / 2;
 
 			this._createArrow({
-				className: 'scra codicon codicon-triangle-up',
+				className: 'scra',
+				icon: scrollbarButtonUpIcon,
 				top: arrowDelta,
 				left: scrollbarDelta,
 				bottom: undefined,
@@ -48,7 +53,8 @@ export class VerticalScrollbar extends AbstractScrollbar {
 			});
 
 			this._createArrow({
-				className: 'scra codicon codicon-triangle-down',
+				className: 'scra',
+				icon: scrollbarButtonDownIcon,
 				top: undefined,
 				left: scrollbarDelta,
 				bottom: arrowDelta,

src/vs/base/browser/ui/toolbar/toolbar.ts

@@ -12,9 +12,12 @@ import { ResolvedKeybinding } from 'vs/base/common/keyCodes';
 import { Disposable, MutableDisposable } from 'vs/base/common/lifecycle';
 import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
 import { withNullAsUndefined } from 'vs/base/common/types';
+import { Codicon, registerIcon } from 'vs/base/browser/ui/codicons/codicons';
 
 export const CONTEXT = 'context.toolbar';
 
+const toolBarMoreIcon = registerIcon('toolbar-more', Codicon.more);
+
 export interface IToolBarOptions {
 	orientation?: ActionsOrientation;
 	actionViewItemProvider?: IActionViewItemProvider;
@@ -65,7 +68,7 @@ export class ToolBar extends Disposable {
 						this.options.actionViewItemProvider,
 						this.actionRunner,
 						this.options.getKeyBinding,
-						'codicon-more',
+						toolBarMoreIcon.className,
 						this.options.anchorAlignmentProvider
 					);
 					this.toggleMenuActionViewItem.value.setActionContext(this.actionBar.context);

src/vs/base/browser/ui/tree/abstractTree.ts

@@ -26,6 +26,9 @@ import { values } from 'vs/base/common/map';
 import { clamp } from 'vs/base/common/numbers';
 import { ScrollEvent } from 'vs/base/common/scrollable';
 import { SetMap } from 'vs/base/common/collections';
+import { Codicon, registerIcon } from 'vs/base/browser/ui/codicons/codicons';
+
+const listClearIcon = registerIcon('list-clear', Codicon.close);
 
 class TreeElementsDragAndDropData<T, TFilterData, TContext> extends ElementsDragAndDropData<T, TContext> {
 
@@ -650,7 +653,7 @@ class TypeFilterController<T, TFilterData> implements IDisposable {
 		this.updateFilterOnTypeTitle();
 		domEvent(this.filterOnTypeDomNode, 'input')(this.onDidChangeFilterOnType, this, this.disposables);
 
-		this.clearDomNode = append(controls, $<HTMLInputElement>('button.clear.codicon.codicon-close'));
+		this.clearDomNode = append(controls, $<HTMLInputElement>('button.clear' + listClearIcon.cssSelector));
 		this.clearDomNode.tabIndex = -1;
 		this.clearDomNode.title = localize('clear', "Clear");
 

src/vs/code/electron-browser/issue/issueReporterMain.ts

@@ -8,7 +8,7 @@ import * as os from 'os';
 import * as browser from 'vs/base/browser/browser';
 import { $ } from 'vs/base/browser/dom';
 import { Button } from 'vs/base/browser/ui/button/button';
-import { CodiconLabel } from 'vs/base/browser/ui/codiconLabel/codiconLabel';
+import { CodiconLabel } from 'vs/base/browser/ui/codicons/codiconLabel';
 import * as collections from 'vs/base/common/collections';
 import { debounce } from 'vs/base/common/decorators';
 import { Disposable } from 'vs/base/common/lifecycle';

src/vs/editor/browser/viewParts/editorScrollbar/editorScrollbar.ts

@@ -44,8 +44,8 @@ export class EditorScrollbar extends ViewPart {
 
 			vertical: scrollbar.vertical,
 			horizontal: scrollbar.horizontal,
-			verticalHasArrows: scrollbar.verticalHasArrows,
-			horizontalHasArrows: scrollbar.horizontalHasArrows,
+			verticalHasArrows: true, //scrollbar.verticalHasArrows,
+			horizontalHasArrows: true, //scrollbar.horizontalHasArrows,
 			verticalScrollbarSize: scrollbar.verticalScrollbarSize,
 			verticalSliderSize: scrollbar.verticalSliderSize,
 			horizontalScrollbarSize: scrollbar.horizontalScrollbarSize,

src/vs/editor/contrib/find/findWidget.ts

@@ -37,6 +37,9 @@ import { AccessibilitySupport } from 'vs/platform/accessibility/common/accessibi
 import { IStorageService, StorageScope } from 'vs/platform/storage/common/storage';
 import { INotificationService } from 'vs/platform/notification/common/notification';
 import { IStorageKeysSyncRegistryService } from 'vs/platform/userDataSync/common/storageKeys';
+import { Codicon, registerIcon } from 'vs/base/browser/ui/codicons/codicons';
+
+export const findSelectionIcon = registerIcon('find-selection', Codicon.selection);
 
 export interface IFindController {
 	replace(): void;
@@ -1017,7 +1020,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
 
 		// Toggle selection button
 		this._toggleSelectionFind = this._register(new Checkbox({
-			actionClassName: 'codicon codicon-selection',
+			icon: findSelectionIcon,
 			title: NLS_TOGGLE_SELECTION_FIND_TITLE + this._keybindingLabelFor(FIND_IDS.ToggleSearchScopeCommand),
 			isChecked: false
 		}));

src/vs/editor/contrib/suggest/suggestWidget.ts

@@ -5,7 +5,7 @@
 
 import 'vs/css!./media/suggest';
 import 'vs/css!./media/suggestStatusBar';
-import 'vs/base/browser/ui/codiconLabel/codiconLabel'; // The codicon symbol styles are defined here and must be loaded
+import 'vs/base/browser/ui/codicons/codicons'; // The codicon symbol styles are defined here and must be loaded
 import 'vs/editor/contrib/documentSymbols/outlineTree'; // The codicon symbol colors are defined here and must be loaded
 import * as nls from 'vs/nls';
 import { createMatches } from 'vs/base/common/filters';

src/vs/workbench/browser/parts/statusbar/statusbarPart.ts

@@ -7,7 +7,7 @@ import 'vs/css!./media/statusbarpart';
 import * as nls from 'vs/nls';
 import { toErrorMessage } from 'vs/base/common/errorMessage';
 import { dispose, IDisposable, Disposable, toDisposable, MutableDisposable } from 'vs/base/common/lifecycle';
-import { CodiconLabel } from 'vs/base/browser/ui/codiconLabel/codiconLabel';
+import { CodiconLabel } from 'vs/base/browser/ui/codicons/codiconLabel';
 import { ICommandService } from 'vs/platform/commands/common/commands';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
 import { Part } from 'vs/workbench/browser/part';

src/vs/workbench/contrib/preferences/browser/settingsTree.ts

@@ -50,8 +50,9 @@ import { SETTINGS_EDITOR_COMMAND_SHOW_CONTEXT_MENU } from 'vs/workbench/contrib/
 import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService';
 import { ISetting, ISettingsGroup, SettingValueType } from 'vs/workbench/services/preferences/common/preferences';
 import { IUserDataSyncEnablementService, getDefaultIgnoredSettings } from 'vs/platform/userDataSync/common/userDataSync';
-import { CodiconLabel } from 'vs/base/browser/ui/codiconLabel/codiconLabel';
 import { getInvalidTypeError } from 'vs/workbench/services/preferences/common/preferencesValidation';
+import { Codicon } from 'vs/base/browser/ui/codicons/codicons';
+import { CodiconLabel } from 'vs/base/browser/ui/codicons/codiconLabel';
 
 const $ = DOM.$;
 
@@ -1151,7 +1152,7 @@ export class SettingBoolRenderer extends AbstractSettingRenderer implements ITre
 		const deprecationWarningElement = DOM.append(container, $('.setting-item-deprecation-message'));
 
 		const toDispose = new DisposableStore();
-		const checkbox = new Checkbox({ actionClassName: 'codicon-check setting-value-checkbox', isChecked: true, title: '', inputActiveOptionBorder: undefined });
+		const checkbox = new Checkbox({ icon: Codicon.check, actionClassName: 'setting-value-checkbox', isChecked: true, title: '', inputActiveOptionBorder: undefined });
 		controlElement.appendChild(checkbox.domNode);
 		toDispose.add(checkbox);
 		toDispose.add(checkbox.onChange(() => {

src/vs/workbench/contrib/search/browser/patternInputWidget.ts

@@ -17,6 +17,7 @@ import { attachInputBoxStyler, attachCheckboxStyler } from 'vs/platform/theme/co
 import { ContextScopedHistoryInputBox } from 'vs/platform/browser/contextScopedHistoryWidget';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import type { IThemable } from 'vs/base/common/styler';
+import { Codicon } from 'vs/base/browser/ui/codicons/codicons';
 
 export interface IOptions {
 	placeholder?: string;
@@ -206,7 +207,8 @@ export class ExcludePatternInputWidget extends PatternInputWidget {
 
 	protected renderSubcontrols(controlsDiv: HTMLDivElement): void {
 		this.useExcludesAndIgnoreFilesBox = this._register(new Checkbox({
-			actionClassName: 'useExcludesAndIgnoreFiles codicon-exclude',
+			icon: Codicon.exclude,
+			actionClassName: 'useExcludesAndIgnoreFiles',
 			title: nls.localize('useExcludesAndIgnoreFilesDescription', "Use Exclude Settings and Ignore Files"),
 			isChecked: true,
 		}));

src/vs/workbench/contrib/search/browser/searchWidget.ts

@@ -33,10 +33,13 @@ import { IAccessibilityService } from 'vs/platform/accessibility/common/accessib
 import { isMacintosh } from 'vs/base/common/platform';
 import { Checkbox } from 'vs/base/browser/ui/checkbox/checkbox';
 import { IViewsService } from 'vs/workbench/common/views';
+import { Codicon, registerIcon } from 'vs/base/browser/ui/codicons/codicons';
 
 /** Specified in searchview.css */
 export const SingleLineInputHeight = 24;
 
+export const searchShowContextIcon = registerIcon('search-show-context', Codicon.listSelection);
+
 export interface ISearchWidgetOptions {
 	value?: string;
 	replaceValue?: string;
@@ -349,7 +352,7 @@ export class SearchWidget extends Widget {
 		this._register(this.searchInputFocusTracker.onDidBlur(() => this.searchInputBoxFocused.set(false)));
 
 
-		this.showContextCheckbox = new Checkbox({ isChecked: false, title: nls.localize('showContext', "Show Context"), actionClassName: 'codicon-list-selection' });
+		this.showContextCheckbox = new Checkbox({ isChecked: false, title: nls.localize('showContext', "Show Context"), icon: searchShowContextIcon });
 		this._register(this.showContextCheckbox.onChange(() => this.onContextLinesChanged()));
 
 		if (options.showContextToggle) {