generate icon-css from theme.comon.IconRegistry

src/vs/base/browser/ui/codicons/codiconStyles.ts

@@ -7,18 +7,7 @@ import 'vs/css!./codicon/codicon';
 import 'vs/css!./codicon/codicon-modifications';
 import 'vs/css!./codicon/codicon-animations';
 
-import { Codicon, iconRegistry } from 'vs/base/common/codicons';
-
-export const CodiconStyles = new class {
-	onDidChange = iconRegistry.onDidRegister;
-	public getCSS(): string {
-		const rules = [];
-		for (let c of iconRegistry.all) {
-			rules.push(formatRule(c));
-		}
-		return rules.join('\n');
-	}
-};
+import { Codicon } from 'vs/base/common/codicons';
 
 export function formatRule(c: Codicon) {
 	let def = c.definition;

src/vs/editor/standalone/browser/standaloneThemeServiceImpl.ts

@@ -16,7 +16,7 @@ import { ColorIdentifier, Extensions, IColorRegistry } from 'vs/platform/theme/c
 import { Extensions as ThemingExtensions, ICssStyleCollector, IFileIconTheme, IThemingRegistry, ITokenStyle } from 'vs/platform/theme/common/themeService';
 import { IDisposable, Disposable } from 'vs/base/common/lifecycle';
 import { ColorScheme } from 'vs/platform/theme/common/theme';
-import { CodiconStyles } from 'vs/base/browser/ui/codicons/codiconStyles';
+import { getIconRegistry } from 'vs/platform/theme/common/iconRegistry';
 
 const VS_THEME_NAME = 'vs';
 const VS_DARK_THEME_NAME = 'vs-dark';
@@ -208,15 +208,18 @@ export class StandaloneThemeServiceImpl extends Disposable implements IStandalon
 		this._knownThemes.set(VS_THEME_NAME, newBuiltInTheme(VS_THEME_NAME));
 		this._knownThemes.set(VS_DARK_THEME_NAME, newBuiltInTheme(VS_DARK_THEME_NAME));
 		this._knownThemes.set(HC_BLACK_THEME_NAME, newBuiltInTheme(HC_BLACK_THEME_NAME));
-		this._codiconCSS = CodiconStyles.getCSS();
+
+		const iconRegistry = getIconRegistry();
+
+		this._codiconCSS = iconRegistry.getCSS();
 		this._themeCSS = '';
 		this._allCSS = `${this._codiconCSS}\n${this._themeCSS}`;
 		this._globalStyleElement = null;
 		this._styleElements = [];
 		this.setTheme(VS_THEME_NAME);
 
-		CodiconStyles.onDidChange(() => {
-			this._codiconCSS = CodiconStyles.getCSS();
+		iconRegistry.onDidChange(() => {
+			this._codiconCSS = iconRegistry.getCSS();
 			this._updateCSS();
 		});
 	}

src/vs/platform/theme/common/iconRegistry.ts

@@ -30,14 +30,14 @@ export interface IconDefinition {
 
 export interface IconContribution {
 	id: string;
-	description: string;
+	description: string | undefined;
 	deprecationMessage?: string;
 	defaults: IconDefaults;
 }
 
 export interface IIconRegistry {
 
-	readonly onDidChangeSchema: Event<void>;
+	readonly onDidChange: Event<void>;
 
 	/**
 	 * Register a icon to the registry.
@@ -72,12 +72,17 @@ export interface IIconRegistry {
 	 */
 	getIconReferenceSchema(): IJSONSchema;
 
+	/**
+	 * The CSS for all icons
+	 */
+	getCSS(): string;
+
 }
 
 class IconRegistry implements IIconRegistry {
 
-	private readonly _onDidChangeSchema = new Emitter<void>();
-	readonly onDidChangeSchema: Event<void> = this._onDidChangeSchema.event;
+	private readonly _onDidChange = new Emitter<void>();
+	readonly onDidChange: Event<void> = this._onDidChange.event;
 
 	private iconsById: { [key: string]: IconContribution };
 	private iconSchema: IJSONSchema & { properties: IJSONSchemaMap } = {
@@ -102,8 +107,18 @@ class IconRegistry implements IIconRegistry {
 	}
 
 	public registerIcon(id: string, defaults: IconDefaults, description?: string, deprecationMessage?: string): ThemeIcon {
-		if (!description) {
-			description = localize('icon.defaultDescription', 'Icon with identifier \'{0}\'', id);
+		const existing = this.iconsById[id];
+		if (existing) {
+			if (description && !existing.description) {
+				existing.description = description;
+				this.iconSchema.properties[id].markdownDescription = `${description}: $(${id})`;
+				const enumIndex = this.iconReferenceSchema.enum.indexOf(id);
+				if (enumIndex !== -1) {
+					this.iconReferenceSchema.enumDescriptions[enumIndex] = description;
+				}
+				this._onDidChange.fire();
+			}
+			return existing;
 		}
 		let iconContribution: IconContribution = { id, description, defaults, deprecationMessage };
 		this.iconsById[id] = iconContribution;
@@ -111,12 +126,14 @@ class IconRegistry implements IIconRegistry {
 		if (deprecationMessage) {
 			propertySchema.deprecationMessage = deprecationMessage;
 		}
-		propertySchema.markdownDescription = `${description}: $(${id})`;
+		if (description) {
+			propertySchema.markdownDescription = `${description}: $(${id})`;
+		}
 		this.iconSchema.properties[id] = propertySchema;
 		this.iconReferenceSchema.enum.push(id);
-		this.iconReferenceSchema.enumDescriptions.push(description);
+		this.iconReferenceSchema.enumDescriptions.push(description || '');
 
-		this._onDidChangeSchema.fire();
+		this._onDidChange.fire();
 		return { id };
 	}
 
@@ -129,7 +146,7 @@ class IconRegistry implements IIconRegistry {
 			this.iconReferenceSchema.enum.splice(index, 1);
 			this.iconReferenceSchema.enumDescriptions.splice(index, 1);
 		}
-		this._onDidChangeSchema.fire();
+		this._onDidChange.fire();
 	}
 
 	public getIcons(): IconContribution[] {
@@ -148,6 +165,29 @@ class IconRegistry implements IIconRegistry {
 		return this.iconReferenceSchema;
 	}
 
+	public getCSS() {
+		const rules = [];
+		for (let id in this.iconsById) {
+			const rule = this.formatRule(id);
+			if (rule) {
+				rules.push(rule);
+			}
+		}
+		return rules.join('\n');
+	}
+
+	private formatRule(id: string): string | undefined {
+		let definition = this.iconsById[id].defaults;
+		while (ThemeIcon.isThemeIcon(definition)) {
+			const c = this.iconsById[definition.id];
+			if (!c) {
+				return undefined;
+			}
+			definition = c.defaults;
+		}
+		return `.codicon-${id}:before { content: '${definition.character}'; }`;
+	}
+
 	public toString() {
 		const sorter = (i1: IconContribution, i2: IconContribution) => {
 			const isThemeIcon1 = ThemeIcon.isThemeIcon(i1.defaults);
@@ -200,14 +240,13 @@ function initialize() {
 }
 initialize();
 
-
 export const iconsSchemaId = 'vscode://schemas/icons';
 
 let schemaRegistry = platform.Registry.as<IJSONContributionRegistry>(JSONExtensions.JSONContribution);
 schemaRegistry.registerSchema(iconsSchemaId, iconRegistry.getIconSchema());
 
 const delayer = new RunOnceScheduler(() => schemaRegistry.notifySchemaChanged(iconsSchemaId), 200);
-iconRegistry.onDidChangeSchema(() => {
+iconRegistry.onDidChange(() => {
 	if (!delayer.isScheduled()) {
 		delayer.schedule();
 	}

src/vs/platform/theme/common/themeService.ts

@@ -71,20 +71,29 @@ export namespace ThemeIcon {
 
 	const _regexAsClassName = /^(codicon\/)?([a-z-]+)(~[a-z]+)?$/i;
 
-	export function asClassName(icon: ThemeIcon): string | undefined {
-		// todo@martin,joh -> this should go into the ThemeService
+	export function asClassNameArray(icon: ThemeIcon): string[] {
 		const match = _regexAsClassName.exec(icon.id);
 		if (!match) {
-			return undefined;
+			return ['codicon', 'codicon-error'];
 		}
 		let [, , name, modifier] = match;
-		let className = `codicon codicon-${name}`;
+		let className = `codicon-${name}`;
 		if (modifier) {
-			className += ` ${modifier.substr(1)}`;
+			return ['codicon', className, modifier.substr(1)];
 		}
-		return className;
+		return ['codicon', className];
+	}
+
+
+	export function asClassName(icon: ThemeIcon): string {
+		return asClassNameArray(icon).join(' ');
 	}
 
+	export function asCSSSelector(icon: ThemeIcon): string {
+		return '.' + asClassNameArray(icon).join('.');
+	}
+
+
 	export function revive(icon: any): ThemeIcon | undefined {
 		if (ThemeIcon.isThemeIcon(icon)) {
 			return { id: icon.id, color: icon.color ? { id: icon.color.id } : undefined };

src/vs/workbench/contrib/debug/browser/breakpointEditorContribution.ts

@@ -32,7 +32,7 @@ import { EditorOption } from 'vs/editor/common/config/editorOptions';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { BrowserFeatures } from 'vs/base/browser/canIUse';
 import { isSafari } from 'vs/base/browser/browser';
-import { registerThemingParticipant, themeColorFromId } from 'vs/platform/theme/common/themeService';
+import { registerThemingParticipant, themeColorFromId, ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { registerColor } from 'vs/platform/theme/common/colorRegistry';
 import { ILabelService } from 'vs/platform/label/common/label';
 import * as icons from 'vs/workbench/contrib/debug/browser/debugIcons';
@@ -47,7 +47,7 @@ interface IBreakpointDecoration {
 }
 
 const breakpointHelperDecoration: IModelDecorationOptions = {
-	glyphMarginClassName: icons.debugBreakpointHint.classNames,
+	glyphMarginClassName: ThemeIcon.asClassName(icons.debugBreakpointHint),
 	stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges
 };
 
@@ -95,7 +95,7 @@ function getBreakpointDecorationOptions(model: ITextModel, breakpoint: IBreakpoi
 
 	const renderInline = breakpoint.column && (breakpoint.column > model.getLineFirstNonWhitespaceColumn(breakpoint.lineNumber));
 	return {
-		glyphMarginClassName: icon.classNames,
+		glyphMarginClassName: ThemeIcon.asClassName(icon),
 		glyphMarginHoverMessage,
 		stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges,
 		beforeContentClassName: renderInline ? `debug-breakpoint-placeholder` : undefined,
@@ -456,7 +456,7 @@ export class BreakpointEditorContribution implements IBreakpointEditorContributi
 			// We could have also rendered this first decoration as part of desiredBreakpointDecorations however at that moment we have no location information
 			const icon = candidate.breakpoint ? getBreakpointMessageAndIcon(this.debugService.state, this.debugService.getModel().areBreakpointsActivated(), candidate.breakpoint, this.labelService).icon : icons.debugBreakpointDisabled;
 			const contextMenuActions = () => this.getContextMenuActions(candidate.breakpoint ? [candidate.breakpoint] : [], activeCodeEditor.getModel().uri, candidate.range.startLineNumber, candidate.range.startColumn);
-			const inlineWidget = new InlineBreakpointWidget(activeCodeEditor, decorationId, icon.classNames, candidate.breakpoint, this.debugService, this.contextMenuService, contextMenuActions);
+			const inlineWidget = new InlineBreakpointWidget(activeCodeEditor, decorationId, ThemeIcon.asClassName(icon), candidate.breakpoint, this.debugService, this.contextMenuService, contextMenuActions);
 
 			return {
 				decorationId,
@@ -645,15 +645,15 @@ registerThemingParticipant((theme, collector) => {
 	const debugIconBreakpointColor = theme.getColor(debugIconBreakpointForeground);
 	if (debugIconBreakpointColor) {
 		collector.addRule(`
-		.monaco-workbench ${icons.debugBreakpoint.cssSelector},
-		.monaco-workbench ${icons.debugBreakpointConditional.cssSelector},
-		.monaco-workbench ${icons.debugBreakpointLog.cssSelector},
-		.monaco-workbench ${icons.debugBreakpointFunction.cssSelector},
-		.monaco-workbench ${icons.debugBreakpointData.cssSelector},
-		.monaco-workbench ${icons.debugBreakpointUnsupported.cssSelector},
-		.monaco-workbench ${icons.debugBreakpointHint.cssSelector}:not([class*='${icons.debugBreakpoint.classNameIdentifier}']):not([class*='${icons.debugStackframe.classNameIdentifier}']),
-		.monaco-workbench ${icons.debugBreakpoint.cssSelector}${icons.debugStackframeFocused.cssSelector}::after,
-		.monaco-workbench ${icons.debugBreakpoint.cssSelector}${icons.debugStackframe.cssSelector}::after {
+		.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugBreakpoint)},
+		.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugBreakpointConditional)},
+		.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugBreakpointLog)},
+		.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugBreakpointFunction)},
+		.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugBreakpointData)},
+		.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugBreakpointUnsupported)},
+		.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugBreakpointHint)}:not([class*='codicon-debug-breakpoint']):not([class*='codicon-debug-stackframe']),
+		.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugBreakpoint)}${ThemeIcon.asCSSSelector(icons.debugStackframeFocused)}::after,
+		.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugBreakpoint)}${ThemeIcon.asCSSSelector(icons.debugStackframe)}::after {
 			color: ${debugIconBreakpointColor} !important;
 		}
 		`);
@@ -680,7 +680,7 @@ registerThemingParticipant((theme, collector) => {
 	const debugIconBreakpointCurrentStackframeForegroundColor = theme.getColor(debugIconBreakpointCurrentStackframeForeground);
 	if (debugIconBreakpointCurrentStackframeForegroundColor) {
 		collector.addRule(`
-		.monaco-workbench ${icons.debugStackframe.cssSelector},
+		.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugStackframe)},
 		.monaco-editor .debug-top-stack-frame-column::before {
 			color: ${debugIconBreakpointCurrentStackframeForegroundColor} !important;
 		}
@@ -690,7 +690,7 @@ registerThemingParticipant((theme, collector) => {
 	const debugIconBreakpointStackframeFocusedColor = theme.getColor(debugIconBreakpointStackframeForeground);
 	if (debugIconBreakpointStackframeFocusedColor) {
 		collector.addRule(`
-		.monaco-workbench ${icons.debugStackframeFocused.cssSelector} {
+		.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugStackframeFocused)} {
 			color: ${debugIconBreakpointStackframeFocusedColor} !important;
 		}
 		`);

src/vs/workbench/contrib/debug/browser/breakpointsView.ts

@@ -13,7 +13,7 @@ import { AddFunctionBreakpointAction, ToggleBreakpointsActivatedAction, RemoveAl
 import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { Constants } from 'vs/base/common/uint';
 import { dispose, IDisposable } from 'vs/base/common/lifecycle';
 import { IListVirtualDelegate, IListContextMenuEvent, IListRenderer } from 'vs/base/browser/ui/list/list';
@@ -38,7 +38,6 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { Orientation } from 'vs/base/browser/ui/splitview/splitview';
 import { IListAccessibilityProvider } from 'vs/base/browser/ui/list/listWidget';
 import * as icons from 'vs/workbench/contrib/debug/browser/debugIcons';
-import { Codicon } from 'vs/base/common/codicons';
 
 const $ = dom.$;
 
@@ -382,7 +381,7 @@ class BreakpointsRenderer implements IListRenderer<IBreakpoint, IBreakpointTempl
 		data.checkbox.checked = breakpoint.enabled;
 
 		const { message, icon } = getBreakpointMessageAndIcon(this.debugService.state, this.debugService.getModel().areBreakpointsActivated(), breakpoint, this.labelService);
-		data.icon.className = icon.classNames;
+		data.icon.className = ThemeIcon.asClassName(icon);
 		data.breakpoint.title = breakpoint.message || message || '';
 
 		const debugActive = this.debugService.state === State.Running || this.debugService.state === State.Stopped;
@@ -478,7 +477,7 @@ class FunctionBreakpointsRenderer implements IListRenderer<FunctionBreakpoint, I
 		data.context = functionBreakpoint;
 		data.name.textContent = functionBreakpoint.name;
 		const { icon, message } = getBreakpointMessageAndIcon(this.debugService.state, this.debugService.getModel().areBreakpointsActivated(), functionBreakpoint, this.labelService);
-		data.icon.className = icon.classNames;
+		data.icon.className = ThemeIcon.asClassName(icon);
 		data.icon.title = message ? message : '';
 		data.checkbox.checked = functionBreakpoint.enabled;
 		data.breakpoint.title = message ? message : '';
@@ -534,7 +533,7 @@ class DataBreakpointsRenderer implements IListRenderer<DataBreakpoint, IBaseBrea
 		data.context = dataBreakpoint;
 		data.name.textContent = dataBreakpoint.description;
 		const { icon, message } = getBreakpointMessageAndIcon(this.debugService.state, this.debugService.getModel().areBreakpointsActivated(), dataBreakpoint, this.labelService);
-		data.icon.className = icon.classNames;
+		data.icon.className = ThemeIcon.asClassName(icon);
 		data.icon.title = message ? message : '';
 		data.checkbox.checked = dataBreakpoint.enabled;
 		data.breakpoint.title = message ? message : '';
@@ -626,7 +625,7 @@ class FunctionBreakpointInputRenderer implements IListRenderer<IFunctionBreakpoi
 		data.reactedOnEvent = false;
 		const { icon, message } = getBreakpointMessageAndIcon(this.debugService.state, this.debugService.getModel().areBreakpointsActivated(), functionBreakpoint, this.labelService);
 
-		data.icon.className = icon.classNames;
+		data.icon.className = ThemeIcon.asClassName(icon);
 		data.icon.title = message ? message : '';
 		data.checkbox.checked = functionBreakpoint.enabled;
 		data.checkbox.disabled = true;
@@ -702,7 +701,7 @@ export function openBreakpointSource(breakpoint: IBreakpoint, sideBySide: boolea
 	}, sideBySide ? SIDE_GROUP : ACTIVE_GROUP);
 }
 
-export function getBreakpointMessageAndIcon(state: State, breakpointsActivated: boolean, breakpoint: IBreakpoint | IFunctionBreakpoint | IDataBreakpoint, labelService?: ILabelService): { message?: string, icon: Codicon } {
+export function getBreakpointMessageAndIcon(state: State, breakpointsActivated: boolean, breakpoint: IBreakpoint | IFunctionBreakpoint | IDataBreakpoint, labelService?: ILabelService): { message?: string, icon: ThemeIcon } {
 	const debugActive = state === State.Running || state === State.Stopped;
 
 	if (!breakpoint.enabled || !breakpointsActivated) {

src/vs/workbench/contrib/debug/browser/callStackEditorContribution.ts

@@ -7,7 +7,7 @@ import { Constants } from 'vs/base/common/uint';
 import { Range, IRange } from 'vs/editor/common/core/range';
 import { TrackedRangeStickiness, IModelDeltaDecoration, IModelDecorationOptions, OverviewRulerLane } from 'vs/editor/common/model';
 import { IDebugService, IStackFrame } from 'vs/workbench/contrib/debug/common/debug';
-import { registerThemingParticipant, themeColorFromId } from 'vs/platform/theme/common/themeService';
+import { registerThemingParticipant, themeColorFromId, ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { registerColor } from 'vs/platform/theme/common/colorRegistry';
 import { localize } from 'vs/nls';
 import { Event } from 'vs/base/common/event';
@@ -24,7 +24,7 @@ const stickiness = TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges;
 
 // we need a separate decoration for glyph margin, since we do not want it on each line of a multi line statement.
 const TOP_STACK_FRAME_MARGIN: IModelDecorationOptions = {
-	glyphMarginClassName: debugStackframe.classNames,
+	glyphMarginClassName: ThemeIcon.asClassName(debugStackframe),
 	stickiness,
 	overviewRuler: {
 		position: OverviewRulerLane.Full,
@@ -32,7 +32,7 @@ const TOP_STACK_FRAME_MARGIN: IModelDecorationOptions = {
 	}
 };
 const FOCUSED_STACK_FRAME_MARGIN: IModelDecorationOptions = {
-	glyphMarginClassName: debugStackframeFocused.classNames,
+	glyphMarginClassName: ThemeIcon.asClassName(debugStackframeFocused),
 	stickiness,
 	overviewRuler: {
 		position: OverviewRulerLane.Full,

src/vs/workbench/contrib/debug/browser/callStackView.ts

@@ -36,7 +36,7 @@ import { ICommandService } from 'vs/platform/commands/common/commands';
 import { CollapseAction } from 'vs/workbench/browser/viewlet';
 import { IViewDescriptorService } from 'vs/workbench/common/views';
 import { textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { IOpenerService } from 'vs/platform/opener/common/opener';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { attachStylerCallback } from 'vs/platform/theme/common/styler';
@@ -207,7 +207,7 @@ export class CallStackView extends ViewPane {
 
 	getActions(): IAction[] {
 		if (this.stateMessage.hidden) {
-			return [new CollapseAction(() => this.tree, true, 'explorer-action ' + icons.debugCollapseAll.classNames)];
+			return [new CollapseAction(() => this.tree, true, 'explorer-action ' + ThemeIcon.asClassName(icons.debugCollapseAll))];
 		}
 
 		return [];
@@ -502,7 +502,7 @@ class SessionsRenderer implements ICompressibleTreeRenderer<IDebugSession, Fuzzy
 
 	renderTemplate(container: HTMLElement): ISessionTemplateData {
 		const session = dom.append(container, $('.session'));
-		dom.append(session, $(icons.callstackViewSession.cssSelector));
+		dom.append(session, $(ThemeIcon.asCSSSelector(icons.callstackViewSession)));
 		const name = dom.append(session, $('.name'));
 		const stateLabel = dom.append(session, $('span.state.label.monaco-count-badge.long'));
 		const label = new HighlightedLabel(name, false);
@@ -660,7 +660,7 @@ class StackFramesRenderer implements ICompressibleTreeRenderer<IStackFrame, Fuzz
 
 		data.actionBar.clear();
 		if (hasActions) {
-			const action = new Action('debug.callStack.restartFrame', nls.localize('restartFrame', "Restart Frame"), icons.debugRestartFrame.classNames, true, async () => {
+			const action = new Action('debug.callStack.restartFrame', nls.localize('restartFrame', "Restart Frame"), ThemeIcon.asClassName(icons.debugRestartFrame), true, async () => {
 				try {
 					await stackFrame.restart();
 				} catch (e) {
@@ -995,7 +995,7 @@ class StopAction extends Action {
 		private readonly session: IDebugSession,
 		@ICommandService private readonly commandService: ICommandService
 	) {
-		super(`action.${STOP_ID}`, STOP_LABEL, 'debug-action ' + icons.debugStop.classNames);
+		super(`action.${STOP_ID}`, STOP_LABEL, 'debug-action ' + ThemeIcon.asClassName(icons.debugStop));
 	}
 
 	public run(): Promise<any> {
@@ -1009,7 +1009,7 @@ class DisconnectAction extends Action {
 		private readonly session: IDebugSession,
 		@ICommandService private readonly commandService: ICommandService
 	) {
-		super(`action.${DISCONNECT_ID}`, DISCONNECT_LABEL, 'debug-action ' + icons.debugDisconnect.classNames);
+		super(`action.${DISCONNECT_ID}`, DISCONNECT_LABEL, 'debug-action ' + ThemeIcon.asClassName(icons.debugDisconnect));
 	}
 
 	public run(): Promise<any> {
@@ -1023,7 +1023,7 @@ class RestartAction extends Action {
 		private readonly session: IDebugSession,
 		@ICommandService private readonly commandService: ICommandService
 	) {
-		super(`action.${RESTART_SESSION_ID}`, RESTART_LABEL, 'debug-action ' + icons.debugRestart.classNames);
+		super(`action.${RESTART_SESSION_ID}`, RESTART_LABEL, 'debug-action ' + ThemeIcon.asClassName(icons.debugRestart));
 	}
 
 	public run(): Promise<any> {
@@ -1037,7 +1037,7 @@ class StepOverAction extends Action {
 		private readonly thread: IThread,
 		@ICommandService private readonly commandService: ICommandService
 	) {
-		super(`action.${STEP_OVER_ID}`, STEP_OVER_LABEL, 'debug-action ' + icons.debugStepOver.classNames, thread.stopped);
+		super(`action.${STEP_OVER_ID}`, STEP_OVER_LABEL, 'debug-action ' + ThemeIcon.asClassName(icons.debugStepOver), thread.stopped);
 	}
 
 	public run(): Promise<any> {
@@ -1051,7 +1051,7 @@ class StepIntoAction extends Action {
 		private readonly thread: IThread,
 		@ICommandService private readonly commandService: ICommandService
 	) {
-		super(`action.${STEP_INTO_ID}`, STEP_INTO_LABEL, 'debug-action ' + icons.debugStepInto.classNames, thread.stopped);
+		super(`action.${STEP_INTO_ID}`, STEP_INTO_LABEL, 'debug-action ' + ThemeIcon.asClassName(icons.debugStepInto), thread.stopped);
 	}
 
 	public run(): Promise<any> {
@@ -1065,7 +1065,7 @@ class StepOutAction extends Action {
 		private readonly thread: IThread,
 		@ICommandService private readonly commandService: ICommandService
 	) {
-		super(`action.${STEP_OUT_ID}`, STEP_OUT_LABEL, 'debug-action ' + icons.debugStepOut.classNames, thread.stopped);
+		super(`action.${STEP_OUT_ID}`, STEP_OUT_LABEL, 'debug-action ' + ThemeIcon.asClassName(icons.debugStepOut), thread.stopped);
 	}
 
 	public run(): Promise<any> {
@@ -1079,7 +1079,7 @@ class PauseAction extends Action {
 		private readonly thread: IThread,
 		@ICommandService private readonly commandService: ICommandService
 	) {
-		super(`action.${PAUSE_ID}`, PAUSE_LABEL, 'debug-action ' + icons.debugPause.classNames, !thread.stopped);
+		super(`action.${PAUSE_ID}`, PAUSE_LABEL, 'debug-action ' + ThemeIcon.asClassName(icons.debugPause), !thread.stopped);
 	}
 
 	public run(): Promise<any> {
@@ -1093,7 +1093,7 @@ class ContinueAction extends Action {
 		private readonly thread: IThread,
 		@ICommandService private readonly commandService: ICommandService
 	) {
-		super(`action.${CONTINUE_ID}`, CONTINUE_LABEL, 'debug-action ' + icons.debugContinue.classNames, thread.stopped);
+		super(`action.${CONTINUE_ID}`, CONTINUE_LABEL, 'debug-action ' + ThemeIcon.asClassName(icons.debugContinue), thread.stopped);
 	}
 
 	public run(): Promise<any> {

src/vs/workbench/contrib/debug/browser/debugActionViewItems.ts

@@ -12,7 +12,7 @@ import { SelectBox, ISelectOptionItem } from 'vs/base/browser/ui/selectBox/selec
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { ICommandService } from 'vs/platform/commands/common/commands';
 import { IDebugService, IDebugSession, IDebugConfiguration, IConfig, ILaunch } from 'vs/workbench/contrib/debug/common/debug';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { attachSelectBoxStyler, attachStylerCallback } from 'vs/platform/theme/common/styler';
 import { selectBorder, selectBackground } from 'vs/platform/theme/common/colorRegistry';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
@@ -69,7 +69,7 @@ export class StartDebugActionViewItem implements IActionViewItem {
 	render(container: HTMLElement): void {
 		this.container = container;
 		container.classList.add('start-debug-action-item');
-		this.start = dom.append(container, $(debugStart.cssSelector));
+		this.start = dom.append(container, $(ThemeIcon.asCSSSelector(debugStart)));
 		this.start.title = this.action.label;
 		this.start.setAttribute('role', 'button');
 		this.start.tabIndex = 0;

src/vs/workbench/contrib/debug/browser/debugActions.ts

@@ -15,6 +15,7 @@ import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService
 import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { deepClone } from 'vs/base/common/objects';
 import * as icons from 'vs/workbench/contrib/debug/browser/debugIcons';
+import { ThemeIcon } from 'vs/platform/theme/common/themeService';
 
 export abstract class AbstractDebugAction extends Action {
 
@@ -65,7 +66,7 @@ export class ConfigureAction extends AbstractDebugAction {
 		@IWorkspaceContextService private readonly contextService: IWorkspaceContextService,
 		@IQuickInputService private readonly quickInputService: IQuickInputService
 	) {
-		super(id, label, 'debug-action ' + icons.debugConfigure.classNames, debugService, keybindingService);
+		super(id, label, 'debug-action ' + ThemeIcon.asClassName(icons.debugConfigure), debugService, keybindingService);
 		this._register(debugService.getConfigurationManager().onDidSelectConfiguration(() => this.updateClass()));
 		this.updateClass();
 	}
@@ -80,7 +81,7 @@ export class ConfigureAction extends AbstractDebugAction {
 
 	private updateClass(): void {
 		const configurationManager = this.debugService.getConfigurationManager();
-		this.class = configurationManager.selectedConfiguration.name ? 'debug-action' + icons.debugConfigure.classNames : 'debug-action ' + icons.debugConfigure.classNames + ' notification';
+		this.class = configurationManager.selectedConfiguration.name ? 'debug-action' + ThemeIcon.asClassName(icons.debugConfigure) : 'debug-action ' + ThemeIcon.asClassName(icons.debugConfigure) + ' notification';
 	}
 
 	async run(): Promise<any> {
@@ -211,7 +212,7 @@ export class RemoveAllBreakpointsAction extends AbstractDebugAction {
 	static readonly LABEL = nls.localize('removeAllBreakpoints', "Remove All Breakpoints");
 
 	constructor(id: string, label: string, @IDebugService debugService: IDebugService, @IKeybindingService keybindingService: IKeybindingService) {
-		super(id, label, 'debug-action ' + icons.breakpointsRemoveAll.classNames, debugService, keybindingService);
+		super(id, label, 'debug-action ' + ThemeIcon.asClassName(icons.breakpointsRemoveAll), debugService, keybindingService);
 		this._register(this.debugService.getModel().onDidChangeBreakpoints(() => this.updateEnablement()));
 	}
 
@@ -269,7 +270,7 @@ export class ToggleBreakpointsActivatedAction extends AbstractDebugAction {
 	static readonly DEACTIVATE_LABEL = nls.localize('deactivateBreakpoints', "Deactivate Breakpoints");
 
 	constructor(id: string, label: string, @IDebugService debugService: IDebugService, @IKeybindingService keybindingService: IKeybindingService) {
-		super(id, label, 'debug-action ' + icons.breakpointsActivate.classNames, debugService, keybindingService);
+		super(id, label, 'debug-action ' + ThemeIcon.asClassName(icons.breakpointsActivate), debugService, keybindingService);
 		this.updateLabel(this.debugService.getModel().areBreakpointsActivated() ? ToggleBreakpointsActivatedAction.DEACTIVATE_LABEL : ToggleBreakpointsActivatedAction.ACTIVATE_LABEL);
 
 		this._register(this.debugService.getModel().onDidChangeBreakpoints(() => {
@@ -312,7 +313,7 @@ export class AddFunctionBreakpointAction extends AbstractDebugAction {
 	static readonly LABEL = nls.localize('addFunctionBreakpoint', "Add Function Breakpoint");
 
 	constructor(id: string, label: string, @IDebugService debugService: IDebugService, @IKeybindingService keybindingService: IKeybindingService) {
-		super(id, label, 'debug-action ' + icons.watchExpressionsAddFuncBreakpoint.classNames, debugService, keybindingService);
+		super(id, label, 'debug-action ' + ThemeIcon.asClassName(icons.watchExpressionsAddFuncBreakpoint), debugService, keybindingService);
 		this._register(this.debugService.getModel().onDidChangeBreakpoints(() => this.updateEnablement()));
 	}
 
@@ -331,7 +332,7 @@ export class AddWatchExpressionAction extends AbstractDebugAction {
 	static readonly LABEL = nls.localize('addWatchExpression', "Add Expression");
 
 	constructor(id: string, label: string, @IDebugService debugService: IDebugService, @IKeybindingService keybindingService: IKeybindingService) {
-		super(id, label, 'debug-action ' + icons.watchExpressionsAdd.classNames, debugService, keybindingService);
+		super(id, label, 'debug-action ' + ThemeIcon.asClassName(icons.watchExpressionsAdd), debugService, keybindingService);
 		this._register(this.debugService.getModel().onDidChangeWatchExpressions(() => this.updateEnablement()));
 		this._register(this.debugService.getViewModel().onDidSelectExpression(() => this.updateEnablement()));
 	}
@@ -351,7 +352,7 @@ export class RemoveAllWatchExpressionsAction extends AbstractDebugAction {
 	static readonly LABEL = nls.localize('removeAllWatchExpressions', "Remove All Expressions");
 
 	constructor(id: string, label: string, @IDebugService debugService: IDebugService, @IKeybindingService keybindingService: IKeybindingService) {
-		super(id, label, 'debug-action ' + icons.watchExpressionsRemoveAll.classNames, debugService, keybindingService);
+		super(id, label, 'debug-action ' + ThemeIcon.asClassName(icons.watchExpressionsRemoveAll), debugService, keybindingService);
 		this._register(this.debugService.getModel().onDidChangeWatchExpressions(() => this.updateEnablement()));
 	}
 

src/vs/workbench/contrib/debug/browser/debugConfigurationManager.ts

@@ -38,6 +38,7 @@ import { DebugConfigurationProviderTriggerKind } from 'vs/workbench/api/common/e
 import { IUriIdentityService } from 'vs/workbench/services/uriIdentity/common/uriIdentity';
 import { AdapterManager } from 'vs/workbench/contrib/debug/browser/debugAdapterManager';
 import { debugConfigure } from 'vs/workbench/contrib/debug/browser/debugIcons';
+import { ThemeIcon } from 'vs/platform/theme/common/themeService';
 
 const jsonRegistry = Registry.as<IJSONContributionRegistry>(JSONExtensions.JSONContribution);
 jsonRegistry.registerSchema(launchSchemaId, launchSchema);
@@ -226,7 +227,7 @@ export class ConfigurationManager implements IConfigurationManager {
 								description: launch.name,
 								config,
 								buttons: [{
-									iconClass: debugConfigure.classNames,
+									iconClass: ThemeIcon.asClassName(debugConfigure),
 									tooltip: nls.localize('editLaunchConfig', "Edit Debug Configuration in launch.json")
 								}],
 								launch

src/vs/workbench/contrib/debug/browser/debugIcons.ts

@@ -3,8 +3,9 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { Codicon, registerIcon } from 'vs/base/common/codicons';
+import { Codicon } from 'vs/base/common/codicons';
 import { localize } from 'vs/nls';
+import { registerIcon } from 'vs/platform/theme/common/iconRegistry';
 
 export const debugConsoleViewIcon = registerIcon('debug-console-view-icon', Codicon.debugConsole, localize('debugConsoleViewIcon', 'View icon of the debug console view.'));
 export const runViewIcon = registerIcon('run-view-icon', Codicon.debugAlt, localize('runViewIcon', 'View icon of the run view.'));

src/vs/workbench/contrib/debug/browser/debugQuickAccess.ts

@@ -14,6 +14,7 @@ import { matchesFuzzy } from 'vs/base/common/filters';
 import { withNullAsUndefined } from 'vs/base/common/types';
 import { ADD_CONFIGURATION_ID } from 'vs/workbench/contrib/debug/browser/debugCommands';
 import { debugConfigure } from 'vs/workbench/contrib/debug/browser/debugIcons';
+import { ThemeIcon } from 'vs/platform/theme/common/themeService';
 
 export class StartDebugQuickAccessProvider extends PickerQuickAccessProvider<IPickerQuickAccessItem> {
 
@@ -56,7 +57,7 @@ export class StartDebugQuickAccessProvider extends PickerQuickAccessProvider<IPi
 					description: this.contextService.getWorkbenchState() === WorkbenchState.WORKSPACE ? config.launch.name : '',
 					highlights: { label: highlights },
 					buttons: [{
-						iconClass: debugConfigure.classNames,
+						iconClass: ThemeIcon.asClassName(debugConfigure),
 						tooltip: localize('customizeLaunchConfig', "Configure Launch Configuration")
 					}],
 					trigger: () => {

src/vs/workbench/contrib/debug/browser/debugToolBar.ts

@@ -18,7 +18,7 @@ import { FocusSessionActionViewItem } from 'vs/workbench/contrib/debug/browser/d
 import { IConfigurationService, IConfigurationChangeEvent } from 'vs/platform/configuration/common/configuration';
 import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
-import { registerThemingParticipant, IThemeService, Themable } from 'vs/platform/theme/common/themeService';
+import { registerThemingParticipant, IThemeService, Themable, ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { registerColor, contrastBorder, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
 import { localize } from 'vs/nls';
 import { INotificationService } from 'vs/platform/notification/common/notification';
@@ -65,7 +65,7 @@ export class DebugToolBar extends Themable implements IWorkbenchContribution {
 		this.$el = dom.$('div.debug-toolbar');
 		this.$el.style.top = `${layoutService.offset?.top ?? 0}px`;
 
-		this.dragArea = dom.append(this.$el, dom.$('div.drag-area' + icons.debugGripper.cssSelector));
+		this.dragArea = dom.append(this.$el, dom.$('div.drag-area' + ThemeIcon.asCSSSelector(icons.debugGripper)));
 
 		const actionBarContainer = dom.append(this.$el, dom.$('div.action-bar-container'));
 		this.debugToolBarMenu = menuService.createMenu(MenuId.DebugToolBar, contextKeyService);
@@ -352,51 +352,51 @@ registerThemingParticipant((theme, collector) => {
 
 	const debugIconStartColor = theme.getColor(debugIconStartForeground);
 	if (debugIconStartColor) {
-		collector.addRule(`.monaco-workbench ${icons.debugStart.cssSelector} { color: ${debugIconStartColor} !important; }`);
+		collector.addRule(`.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugStart)} { color: ${debugIconStartColor} !important; }`);
 	}
 
 	const debugIconPauseColor = theme.getColor(debugIconPauseForeground);
 	if (debugIconPauseColor) {
-		collector.addRule(`.monaco-workbench ${icons.debugPause.cssSelector} { color: ${debugIconPauseColor} !important; }`);
+		collector.addRule(`.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugPause)} { color: ${debugIconPauseColor} !important; }`);
 	}
 
 	const debugIconStopColor = theme.getColor(debugIconStopForeground);
 	if (debugIconStopColor) {
-		collector.addRule(`.monaco-workbench ${icons.debugStop.cssSelector} { color: ${debugIconStopColor} !important; }`);
+		collector.addRule(`.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugStop)} { color: ${debugIconStopColor} !important; }`);
 	}
 
 	const debugIconDisconnectColor = theme.getColor(debugIconDisconnectForeground);
 	if (debugIconDisconnectColor) {
-		collector.addRule(`.monaco-workbench .debug-view-content ${icons.debugDisconnect.cssSelector}, .monaco-workbench .debug-toolbar ${icons.debugDisconnect.cssSelector} { color: ${debugIconDisconnectColor} !important; }`);
+		collector.addRule(`.monaco-workbench .debug-view-content ${ThemeIcon.asCSSSelector(icons.debugDisconnect)}, .monaco-workbench .debug-toolbar ${ThemeIcon.asCSSSelector(icons.debugDisconnect)} { color: ${debugIconDisconnectColor} !important; }`);
 	}
 
 	const debugIconRestartColor = theme.getColor(debugIconRestartForeground);
 	if (debugIconRestartColor) {
-		collector.addRule(`.monaco-workbench ${icons.debugRestart.cssSelector}, .monaco-workbench ${icons.debugRestartFrame.cssSelector} { color: ${debugIconRestartColor} !important; }`);
+		collector.addRule(`.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugRestart)}, .monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugRestartFrame)} { color: ${debugIconRestartColor} !important; }`);
 	}
 
 	const debugIconStepOverColor = theme.getColor(debugIconStepOverForeground);
 	if (debugIconStepOverColor) {
-		collector.addRule(`.monaco-workbench ${icons.debugStepOver.cssSelector} { color: ${debugIconStepOverColor} !important; }`);
+		collector.addRule(`.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugStepOver)} { color: ${debugIconStepOverColor} !important; }`);
 	}
 
 	const debugIconStepIntoColor = theme.getColor(debugIconStepIntoForeground);
 	if (debugIconStepIntoColor) {
-		collector.addRule(`.monaco-workbench ${icons.debugStepInto.cssSelector} { color: ${debugIconStepIntoColor} !important; }`);
+		collector.addRule(`.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugStepInto)} { color: ${debugIconStepIntoColor} !important; }`);
 	}
 
 	const debugIconStepOutColor = theme.getColor(debugIconStepOutForeground);
 	if (debugIconStepOutColor) {
-		collector.addRule(`.monaco-workbench ${icons.debugStepOut.cssSelector} { color: ${debugIconStepOutColor} !important; }`);
+		collector.addRule(`.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugStepOut)} { color: ${debugIconStepOutColor} !important; }`);
 	}
 
 	const debugIconContinueColor = theme.getColor(debugIconContinueForeground);
 	if (debugIconContinueColor) {
-		collector.addRule(`.monaco-workbench ${icons.debugContinue.cssSelector}, .monaco-workbench ${icons.debugReverseContinue.cssSelector} { color: ${debugIconContinueColor} !important; }`);
+		collector.addRule(`.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugContinue)}, .monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugReverseContinue)} { color: ${debugIconContinueColor} !important; }`);
 	}
 
 	const debugIconStepBackColor = theme.getColor(debugIconStepBackForeground);
 	if (debugIconStepBackColor) {
-		collector.addRule(`.monaco-workbench ${icons.debugStepBack.cssSelector} { color: ${debugIconStepBackColor} !important; }`);
+		collector.addRule(`.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugStepBack)} { color: ${debugIconStepBackColor} !important; }`);
 	}
 });

src/vs/workbench/contrib/debug/browser/debugViewlet.ts

@@ -15,7 +15,7 @@ import { IProgressService } from 'vs/platform/progress/common/progress';
 import { IWorkspaceContextService, WorkbenchState } from 'vs/platform/workspace/common/workspace';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IStorageService } from 'vs/platform/storage/common/storage';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
@@ -248,7 +248,7 @@ export class OpenDebugConsoleAction extends ToggleViewAction {
 		@IContextKeyService contextKeyService: IContextKeyService,
 		@IWorkbenchLayoutService layoutService: IWorkbenchLayoutService
 	) {
-		super(id, label, REPL_VIEW_ID, viewsService, viewDescriptorService, contextKeyService, layoutService, debugConsole.classNames);
+		super(id, label, REPL_VIEW_ID, viewsService, viewDescriptorService, contextKeyService, layoutService, ThemeIcon.asClassName(debugConsole));
 	}
 }
 

src/vs/workbench/contrib/debug/browser/repl.ts

@@ -20,7 +20,7 @@ import { ServiceCollection } from 'vs/platform/instantiation/common/serviceColle
 import { IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/contextkey';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { ICodeEditor, isCodeEditor } from 'vs/editor/browser/editorBrowser';
 import { memoize } from 'vs/base/common/decorators';
 import { dispose, IDisposable, Disposable } from 'vs/base/common/lifecycle';
@@ -596,7 +596,7 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
 
 	private createReplInput(container: HTMLElement): void {
 		this.replInputContainer = dom.append(container, $('.repl-input-wrapper'));
-		dom.append(this.replInputContainer, $('.repl-input-chevron' + debugConsoleEvaluationPrompt.cssSelector));
+		dom.append(this.replInputContainer, $('.repl-input-chevron' + ThemeIcon.asCSSSelector(debugConsoleEvaluationPrompt)));
 
 		const { scopedContextKeyService, historyNavigationEnablement } = createAndBindHistoryNavigationWidgetScopedContextKeyService(this.contextKeyService, { target: this.replInputContainer, historyNavigator: this });
 		this.historyNavigationEnablement = historyNavigationEnablement;
@@ -857,7 +857,7 @@ export class ClearReplAction extends Action {
 	constructor(id: string, label: string,
 		@IViewsService private readonly viewsService: IViewsService
 	) {
-		super(id, label, 'debug-action ' + debugConsoleClearAll.classNames);
+		super(id, label, 'debug-action ' + ThemeIcon.asClassName(debugConsoleClearAll));
 	}
 
 	async run(): Promise<any> {

src/vs/workbench/contrib/debug/browser/replViewer.ts

@@ -21,7 +21,7 @@ import { FuzzyScore, createMatches } from 'vs/base/common/filters';
 import { HighlightedLabel, IHighlight } from 'vs/base/browser/ui/highlightedlabel/highlightedLabel';
 import { IReplElementSource, IDebugService, IExpression, IReplElement, IDebugConfiguration, IDebugSession, IExpressionContainer } from 'vs/workbench/contrib/debug/common/debug';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { localize } from 'vs/nls';
 import { CountBadge } from 'vs/base/browser/ui/countBadge/countBadge';
 import { attachBadgeStyler } from 'vs/platform/theme/common/styler';
@@ -68,7 +68,7 @@ export class ReplEvaluationInputsRenderer implements ITreeRenderer<ReplEvaluatio
 	}
 
 	renderTemplate(container: HTMLElement): IReplEvaluationInputTemplateData {
-		dom.append(container, $('span.arrow' + debugConsoleEvaluationInput.cssSelector));
+		dom.append(container, $('span.arrow' + ThemeIcon.asCSSSelector(debugConsoleEvaluationInput)));
 		const input = dom.append(container, $('.expression'));
 		const label = new HighlightedLabel(input, false);
 		return { label };

src/vs/workbench/contrib/debug/browser/variablesView.ts

@@ -30,7 +30,7 @@ import { IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/c
 import { dispose } from 'vs/base/common/lifecycle';
 import { IViewDescriptorService } from 'vs/workbench/common/views';
 import { IOpenerService } from 'vs/platform/opener/common/opener';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { withUndefinedAsNull } from 'vs/base/common/types';
 import { IMenuService, IMenu, MenuId } from 'vs/platform/actions/common/actions';
@@ -180,7 +180,7 @@ export class VariablesView extends ViewPane {
 	}
 
 	getActions(): IAction[] {
-		return [new CollapseAction(() => this.tree, true, 'explorer-action ' + debugCollapseAll.classNames)];
+		return [new CollapseAction(() => this.tree, true, 'explorer-action ' + ThemeIcon.asClassName(debugCollapseAll))];
 	}
 
 	layoutBody(width: number, height: number): void {

src/vs/workbench/contrib/debug/browser/watchExpressionsView.ts

@@ -30,7 +30,7 @@ import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { dispose } from 'vs/base/common/lifecycle';
 import { IViewDescriptorService } from 'vs/workbench/common/views';
 import { IOpenerService } from 'vs/platform/opener/common/opener';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { debugCollapseAll } from 'vs/workbench/contrib/debug/browser/debugIcons';
 
@@ -161,7 +161,7 @@ export class WatchExpressionsView extends ViewPane {
 	getActions(): IAction[] {
 		return [
 			new AddWatchExpressionAction(AddWatchExpressionAction.ID, AddWatchExpressionAction.LABEL, this.debugService, this.keybindingService),
-			new CollapseAction(() => this.tree, true, 'explorer-action ' + debugCollapseAll.classNames),
+			new CollapseAction(() => this.tree, true, 'explorer-action ' + ThemeIcon.asClassName(debugCollapseAll)),
 			new RemoveAllWatchExpressionsAction(RemoveAllWatchExpressionsAction.ID, RemoveAllWatchExpressionsAction.LABEL, this.debugService, this.keybindingService)
 		];
 	}

src/vs/workbench/contrib/debug/test/browser/callStack.test.ts

@@ -18,6 +18,7 @@ import { getContext, getContextForContributedActions, getSpecificSourceName } fr
 import { getStackFrameThreadAndSessionToFocus } from 'vs/workbench/contrib/debug/browser/debugService';
 import { generateUuid } from 'vs/base/common/uuid';
 import { debugStackframe, debugStackframeFocused } from 'vs/workbench/contrib/debug/browser/debugIcons';
+import { ThemeIcon } from 'vs/platform/theme/common/themeService';
 
 export function createMockSession(model: DebugModel, name = 'mockSession', options?: IDebugSessionOptions): DebugSession {
 	return new DebugSession(generateUuid(), { resolved: { name, type: 'node', request: 'launch' }, unresolved: undefined }, undefined!, model, options, {
@@ -309,7 +310,7 @@ suite('Debug - CallStack', () => {
 		let decorations = createDecorationsForStackFrame(firstStackFrame, firstStackFrame.range, true);
 		assert.equal(decorations.length, 2);
 		assert.deepEqual(decorations[0].range, new Range(1, 2, 1, 1));
-		assert.equal(decorations[0].options.glyphMarginClassName, debugStackframe.classNames);
+		assert.equal(decorations[0].options.glyphMarginClassName, ThemeIcon.asClassName(debugStackframe));
 		assert.deepEqual(decorations[1].range, new Range(1, Constants.MAX_SAFE_SMALL_INTEGER, 1, 1));
 		assert.equal(decorations[1].options.className, 'debug-top-stack-frame-line');
 		assert.equal(decorations[1].options.isWholeLine, true);
@@ -317,7 +318,7 @@ suite('Debug - CallStack', () => {
 		decorations = createDecorationsForStackFrame(secondStackFrame, firstStackFrame.range, true);
 		assert.equal(decorations.length, 2);
 		assert.deepEqual(decorations[0].range, new Range(1, 2, 1, 1));
-		assert.equal(decorations[0].options.glyphMarginClassName, debugStackframeFocused.classNames);
+		assert.equal(decorations[0].options.glyphMarginClassName, ThemeIcon.asClassName(debugStackframeFocused));
 		assert.deepEqual(decorations[1].range, new Range(1, Constants.MAX_SAFE_SMALL_INTEGER, 1, 1));
 		assert.equal(decorations[1].options.className, 'debug-focused-stack-frame-line');
 		assert.equal(decorations[1].options.isWholeLine, true);
@@ -325,7 +326,7 @@ suite('Debug - CallStack', () => {
 		decorations = createDecorationsForStackFrame(firstStackFrame, new Range(1, 5, 1, 6), true);
 		assert.equal(decorations.length, 3);
 		assert.deepEqual(decorations[0].range, new Range(1, 2, 1, 1));
-		assert.equal(decorations[0].options.glyphMarginClassName, debugStackframe.classNames);
+		assert.equal(decorations[0].options.glyphMarginClassName, ThemeIcon.asClassName(debugStackframe));
 		assert.deepEqual(decorations[1].range, new Range(1, Constants.MAX_SAFE_SMALL_INTEGER, 1, 1));
 		assert.equal(decorations[1].options.className, 'debug-top-stack-frame-line');
 		assert.equal(decorations[1].options.isWholeLine, true);

src/vs/workbench/services/themes/browser/workbenchThemeService.ts

@@ -36,9 +36,9 @@ import { ILogService } from 'vs/platform/log/common/log';
 import { isWeb } from 'vs/base/common/platform';
 import { ColorScheme } from 'vs/platform/theme/common/theme';
 import { IHostColorSchemeService } from 'vs/workbench/services/themes/common/hostColorSchemeService';
-import { CodiconStyles } from 'vs/base/browser/ui/codicons/codiconStyles';
 import { RunOnceScheduler, Sequencer } from 'vs/base/common/async';
 import { IUserDataInitializationService } from 'vs/workbench/services/userData/browser/userDataInit';
+import { getIconRegistry } from 'vs/platform/theme/common/iconRegistry';
 
 // implementation
 
@@ -179,12 +179,13 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
 		const codiconStyleSheet = createStyleSheet();
 		codiconStyleSheet.id = 'codiconStyles';
 
+		const iconRegistry = getIconRegistry();
 		function updateAll() {
-			codiconStyleSheet.textContent = CodiconStyles.getCSS();
+			codiconStyleSheet.textContent = iconRegistry.getCSS();
 		}
 
 		const delayer = new RunOnceScheduler(updateAll, 0);
-		CodiconStyles.onDidChange(() => delayer.schedule());
+		iconRegistry.onDidChange(() => delayer.schedule());
 		delayer.schedule();
 	}