Add icon font and adopt in panel area

src/vs/base/browser/ui/actionbar/actionbar.css

@@ -40,7 +40,7 @@
 	transform: scale(1.272019649, 1.272019649); /* 1.272019649 = √φ */
 }
 
-.monaco-action-bar .action-item .icon {
+.monaco-action-bar .action-item .codicon {
 	display: inline-block;
 }
 
@@ -95,4 +95,4 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-}
+}

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

@@ -311,14 +311,14 @@ export class ActionViewItem extends BaseActionViewItem {
 
 		if (this.options.icon) {
 			this.cssClass = this.getAction().class;
-			DOM.addClass(this.label, 'icon');
+			DOM.addClass(this.label, 'codicon');
 			if (this.cssClass) {
 				DOM.addClasses(this.label, this.cssClass);
 			}
 
 			this.updateEnabled();
 		} else {
-			DOM.removeClass(this.label, 'icon');
+			DOM.removeClass(this.label, 'codicon');
 		}
 	}
 

src/vs/base/browser/ui/codiconLabel/codicon/codicon-animations.css

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+@keyframes codicon-spin {
+	100% {
+		transform:rotate(360deg);
+	}
+}
+
+.codicon-animation-spin {
+	animation: octicon-spin 1.5s linear infinite;
+}

src/vs/base/browser/ui/codiconLabel/codiconLabel.mock.ts

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { escape } from 'vs/base/common/strings';
+
+export function renderCodicons(text: string): string {
+	return escape(text);
+}
+
+export class CodiconLabel {
+
+	private _container: HTMLElement;
+
+	constructor(container: HTMLElement) {
+		this._container = container;
+	}
+
+	set text(text: string) {
+		this._container.innerHTML = renderCodicons(text || '');
+	}
+
+}

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

@@ -0,0 +1,33 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  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-animations';
+import { escape } from 'vs/base/common/strings';
+
+function expand(text: string): string {
+	return text.replace(/\$\(((.+?)(~(.*?))?)\)/g, (_match, _g1, name, _g3, animation) => {
+		return `<span class="codicon codicon-${name} ${animation ? `codicon-animation-${animation}` : ''}"></span>`;
+	});
+}
+
+export function renderCodicons(label: string): string {
+	return expand(escape(label));
+}
+
+export class CodiconLabel {
+
+	constructor(
+		private readonly _container: HTMLElement
+	) { }
+
+	set text(text: string) {
+		this._container.innerHTML = renderCodicons(text || '');
+	}
+
+	set title(title: string) {
+		this._container.title = title;
+	}
+}

src/vs/base/browser/ui/highlightedlabel/highlightedLabel.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as objects from 'vs/base/common/objects';
-import { renderOcticons } from 'vs/base/browser/ui/octiconLabel/octiconLabel';
+import { renderCodicons } from 'vs/base/browser/ui/codiconLabel/codiconLabel';
 import { escape } from 'vs/base/common/strings';
 
 export interface IHighlight {
@@ -65,21 +65,21 @@ export class HighlightedLabel {
 			if (pos < highlight.start) {
 				htmlContent += '<span>';
 				const substring = this.text.substring(pos, highlight.start);
-				htmlContent += this.supportOcticons ? renderOcticons(substring) : escape(substring);
+				htmlContent += this.supportOcticons ? renderCodicons(substring) : escape(substring);
 				htmlContent += '</span>';
 				pos = highlight.end;
 			}
 			htmlContent += '<span class="highlight">';
 			const substring = this.text.substring(highlight.start, highlight.end);
-			htmlContent += this.supportOcticons ? renderOcticons(substring) : escape(substring);
+			htmlContent += this.supportOcticons ? renderCodicons(substring) : escape(substring);
 			htmlContent += '</span>';
 			pos = highlight.end;
 		}
 
 		if (pos < this.text.length) {
 			htmlContent += '<span>';
 			const substring = this.text.substring(pos);
-			htmlContent += this.supportOcticons ? renderOcticons(substring) : escape(substring);
+			htmlContent += this.supportOcticons ? renderCodicons(substring) : escape(substring);
 			htmlContent += '</span>';
 		}
 

src/vs/base/browser/ui/inputbox/inputBox.css

@@ -123,7 +123,7 @@
 	margin-left: 2px;
 }
 
-.monaco-inputbox .monaco-action-bar .action-item .icon {
+.monaco-inputbox .monaco-action-bar .action-item .codicon {
 	background-repeat: no-repeat;
 	width: 16px;
 	height: 16px;

src/vs/base/parts/tree/browser/tree.css

@@ -110,15 +110,3 @@
 .hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children.loading > .content:before {
 	background-image: url('loading-hc.svg');
 }
-
-.monaco-tree-action.collapse-all {
-	background: url('collapse-all-light.svg') center center no-repeat;
-}
-
-.vs-dark .monaco-tree-action.collapse-all {
-	background: url('collapse-all-dark.svg') center center no-repeat;
-}
-
-.hc-black .monaco-tree-action.collapse-all {
-	background: url('collapse-all-hc.svg') center center no-repeat;
-}

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

@@ -187,6 +187,8 @@ export const activeContrastBorder = registerColor('contrastActiveBorder', { ligh
 
 export const selectionBackground = registerColor('selection.background', { light: null, dark: null, hc: null }, nls.localize('selectionBackground', "The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor."));
 
+export const iconDefault = registerColor('icon.default', { light: '#424242', dark: '#C5C5C5', hc: '#FFFFFF' }, nls.localize('iconDefault', "The default color for icons in the workbench."));
+
 // ------ text colors
 
 export const textSeparatorForeground = registerColor('textSeparator.foreground', { light: '#0000002e', dark: '#ffffff2e', hc: Color.black }, nls.localize('textSeparatorForeground', "Color for text separators."));

src/vs/workbench/browser/parts/panel/media/panelpart.css

@@ -124,20 +124,6 @@
 	margin-right: 10px;
 }
 
-/* Close */
-.monaco-workbench .hide-panel-action {
-	background: url('close-light.svg') center center no-repeat;
-}
-
-.vs-dark .monaco-workbench .hide-panel-action {
-	background: url('close-dark.svg') center center no-repeat;
-}
-
-.hc-black .monaco-workbench .hide-panel-action {
-	background: url('close-hc.svg') center center no-repeat;
-}
-
-
 /* Up */
 .monaco-workbench .maximize-panel-action {
 	background-image: url('chevron-up-light.svg');

src/vs/workbench/browser/parts/panel/panelActions.ts

@@ -28,7 +28,7 @@ export class ClosePanelAction extends Action {
 		name: string,
 		@IWorkbenchLayoutService private readonly layoutService: IWorkbenchLayoutService
 	) {
-		super(id, name, 'hide-panel-action');
+		super(id, name, 'codicon-close');
 	}
 
 	run(): Promise<any> {
@@ -141,11 +141,11 @@ export class ToggleMaximizedPanelAction extends Action {
 		@IWorkbenchLayoutService private readonly layoutService: IWorkbenchLayoutService,
 		@IEditorGroupsService editorGroupsService: IEditorGroupsService
 	) {
-		super(id, label, layoutService.isPanelMaximized() ? 'minimize-panel-action' : 'maximize-panel-action');
+		super(id, label, layoutService.isPanelMaximized() ? 'codicon-chevron-down' : 'codicon-chevron-up');
 
 		this.toDispose.add(editorGroupsService.onDidLayout(() => {
 			const maximized = this.layoutService.isPanelMaximized();
-			this.class = maximized ? 'minimize-panel-action' : 'maximize-panel-action';
+			this.class = maximized ? 'codicon-chevron-down' : 'codicon-chevron-up';
 			this.label = maximized ? ToggleMaximizedPanelAction.RESTORE_LABEL : ToggleMaximizedPanelAction.MAXIMIZE_LABEL;
 		}));
 	}

src/vs/workbench/browser/style.ts

@@ -6,11 +6,17 @@
 import 'vs/css!./media/style';
 
 import { registerThemingParticipant, ITheme, ICssStyleCollector, HIGH_CONTRAST } from 'vs/platform/theme/common/themeService';
-import { foreground, selectionBackground, focusBorder, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, listHighlightForeground, inputPlaceholderForeground } from 'vs/platform/theme/common/colorRegistry';
+import { iconDefault, foreground, selectionBackground, focusBorder, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, listHighlightForeground, inputPlaceholderForeground } from 'vs/platform/theme/common/colorRegistry';
 import { WORKBENCH_BACKGROUND } from 'vs/workbench/common/theme';
 
 registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 
+	// Icon defaults
+	const iconDefaultColor = theme.getColor(iconDefault);
+	if (iconDefaultColor) {
+		collector.addRule(`.monaco-workbench .codicon { color: ${iconDefaultColor}; }`);
+	}
+
 	// Foreground
 	const windowForeground = theme.getColor(foreground);
 	if (windowForeground) {
@@ -136,4 +142,5 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 		}
 		`);
 	}
+
 });

src/vs/workbench/contrib/debug/browser/media/repl.css

@@ -88,19 +88,6 @@
 	font-size: 9px;
 }
 
-/* Actions */
-.debug-action.clear-repl {
-	background: url('clear-light.svg') center center no-repeat;
-}
-
-.vs-dark .debug-action.clear-repl {
-	background: url('clear-dark.svg') center center no-repeat;
-}
-
-.hc-black .debug-action.clear-repl {
-	background: url('clear-hc.svg') center center no-repeat;
-}
-
 /* Output coloring  and styling */
 .repl .repl-tree .output.expression > .ignore {
 	font-style: italic;

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

@@ -1008,7 +1008,7 @@ export class ClearReplAction extends Action {
 	constructor(id: string, label: string,
 		@IPanelService private readonly panelService: IPanelService
 	) {
-		super(id, label, 'debug-action clear-repl');
+		super(id, label, 'debug-action codicon-clear-all');
 	}
 
 	run(): Promise<any> {

src/vs/workbench/contrib/extensions/browser/media/extensionActions.css

@@ -78,7 +78,7 @@
 	margin: 0.15em;
 }
 
-.monaco-action-bar .action-item .action-label.system-disable.icon {
+.monaco-action-bar .action-item .action-label.system-disable.codicon {
 	opacity: 1;
 	height: 18px;
 	width: 10px;

src/vs/workbench/contrib/markers/browser/markersPanel.ts

@@ -117,7 +117,7 @@ export class MarkersPanel extends Panel implements IMarkerFilterController {
 		this.rangeHighlightDecorations = this._register(this.instantiationService.createInstance(RangeHighlightDecorations));
 
 		// actions
-		this.collapseAllAction = this._register(new Action('vs.tree.collapse', localize('collapseAll', "Collapse All"), 'monaco-tree-action collapse-all', true, async () => this.collapseAll()));
+		this.collapseAllAction = this._register(new Action('vs.tree.collapse', localize('collapseAll', "Collapse All"), 'monaco-tree-action codicon-collapse-all', true, async () => this.collapseAll()));
 		this.filterAction = this._register(this.instantiationService.createInstance(MarkersFilterAction, { filterText: this.panelState['filter'] || '', filterHistory: this.panelState['filterHistory'] || [], useFilesExclude: !!this.panelState['useFilesExclude'] }));
 	}
 

src/vs/workbench/contrib/markers/browser/markersPanelActions.ts

@@ -213,7 +213,7 @@ export class MarkersFilterActionViewItem extends BaseActionViewItem {
 
 	private createFilesExcludeCheckbox(container: HTMLElement): void {
 		const filesExcludeFilter = this._register(new Checkbox({
-			actionClassName: 'markers-panel-filter-filesExclude',
+			actionClassName: 'codicon codicon-exclude',
 			title: this.action.useFilesExclude ? Messages.MARKERS_PANEL_ACTION_TOOLTIP_DO_NOT_USE_FILES_EXCLUDE : Messages.MARKERS_PANEL_ACTION_TOOLTIP_USE_FILES_EXCLUDE,
 			isChecked: this.action.useFilesExclude
 		}));