use a single letter and render that

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

@@ -25,7 +25,7 @@ export interface IIconLabelOptions {
 	italic?: boolean;
 	matches?: IMatch[];
 	color?: Color;
-	extraIcon?: uri;
+	badge?: { letter: string, title: string };
 }
 
 class FastLabelNode {
@@ -87,6 +87,7 @@ export class IconLabel {
 	private domNode: FastLabelNode;
 	private labelNode: FastLabelNode | HighlightedLabel;
 	private descriptionNode: FastLabelNode;
+	private badgeNode: HTMLSpanElement;
 
 	constructor(container: HTMLElement, options?: IIconLabelCreationOptions) {
 		this.domNode = new FastLabelNode(dom.append(container, dom.$('.monaco-icon-label')));
@@ -147,18 +148,22 @@ export class IconLabel {
 		this.descriptionNode.textContent = description || '';
 		this.descriptionNode.empty = !description;
 
-		if (options && options.extraIcon) {
-			this.element.style.backgroundImage = `url("${options.extraIcon.toString(true)}")`;
-			this.element.style.backgroundRepeat = 'no-repeat';
-			this.element.style.backgroundPosition = 'right center';
-			this.element.style.paddingRight = '20px';
-			this.element.style.marginRight = '14px';
-		} else {
-			this.element.style.backgroundImage = '';
-			this.element.style.backgroundRepeat = '';
-			this.element.style.backgroundPosition = '';
-			this.element.style.paddingRight = '';
-			this.element.style.marginRight = '';
+		if (options && options.badge) {
+			if (!this.badgeNode) {
+				this.badgeNode = document.createElement('span');
+				this.badgeNode.className = 'label-badge';
+				this.badgeNode.style.backgroundColor = options.color.toString();
+				this.badgeNode.style.color = (options.color.isDarker() ? Color.white : Color.black).toString();
+				this.element.style.display = 'flex';
+				this.element.appendChild(this.badgeNode);
+			}
+			const { letter, title } = options.badge;
+			this.badgeNode.innerHTML = letter;
+			this.badgeNode.title = title;
+			dom.show(this.badgeNode);
+
+		} else if (this.badgeNode) {
+			dom.hide(this.badgeNode);
 		}
 	}
 

src/vs/base/browser/ui/iconLabel/iconlabel.css

@@ -42,4 +42,17 @@
 .monaco-icon-label.italic > .label-name,
 .monaco-icon-label.italic > .label-description {
 	font-style: italic;
-}
\ No newline at end of file
+}
+
+.monaco-icon-label > .label-badge {
+	align-self: center;
+	height: 12px;
+	min-width: 10px;
+	line-height: 12px;
+	font-size: 80%;
+	margin: 1px 15px 1px auto;
+	padding: 2px 4px;
+	border-radius: 14px;
+	font-weight: normal;
+	text-align: center;
+}

src/vs/workbench/browser/labels.ts

@@ -25,8 +25,6 @@ import { Schemas } from 'vs/base/common/network';
 import { FileKind } from 'vs/platform/files/common/files';
 import { IModel } from 'vs/editor/common/editorCommon';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { Color } from 'vs/base/common/color';
-import { localize } from 'vs/nls';
 
 export interface IResourceLabel {
 	name: string;
@@ -159,60 +157,43 @@ export class ResourceLabel extends IconLabel {
 			return;
 		}
 
+		const iconLabelOptions: IIconLabelOptions = {
+			title: '',
+			italic: this.options && this.options.italic,
+			matches: this.options && this.options.matches,
+		};
+
 		const resource = this.label.resource;
 		let label = this.label.name;
 
-		let title = '';
+
 		if (this.options && typeof this.options.title === 'string') {
-			title = this.options.title;
+			iconLabelOptions.title = this.options.title;
 		} else if (resource) {
-			title = getPathLabel(resource, void 0, this.environmentService);
+			iconLabelOptions.title = getPathLabel(resource, void 0, this.environmentService);
 		}
 
 		if (!this.computedIconClasses) {
 			this.computedIconClasses = getIconClasses(this.modelService, this.modeService, resource, this.options && this.options.fileKind);
 		}
 
-		let extraClasses = this.computedIconClasses.slice(0);
+		iconLabelOptions.extraClasses = this.computedIconClasses.slice(0);
 		if (this.options && this.options.extraClasses) {
-			extraClasses.push(...this.options.extraClasses);
+			iconLabelOptions.extraClasses.push(...this.options.extraClasses);
 		}
 
-		const italic = this.options && this.options.italic;
-		const matches = this.options && this.options.matches;
-
-
-
-		let color: Color;
-		let extraIcon: uri;
 		if (this.options && this.options.fileDecorations) {
 			let deco = this.decorationsService.getTopDecoration(
 				resource,
 				this.options.fileDecorations === 'all'
 			);
-
 			if (deco) {
-				color = this.themeService.getTheme().getColor(deco.color);
-
-				if (deco.tooltip) {
-					title = localize('deco.tooltip', "{0}, {1}", title, deco.tooltip);
-				}
-
-				if (deco.icon) {
-					const { type } = this.themeService.getTheme();
-					extraIcon = type === 'light' ? deco.icon.light : deco.icon.dark;
-				}
+				iconLabelOptions.color = this.themeService.getTheme().getColor(deco.color);
+				iconLabelOptions.badge = deco.letter && { letter: deco.letter, title: deco.tooltip };
 			}
 		}
 
-		this.setValue(label, this.label.description, {
-			title,
-			extraClasses,
-			italic,
-			matches,
-			color,
-			extraIcon
-		});
+		this.setValue(label, this.label.description, iconLabelOptions);
 	}
 
 	public dispose(): void {

src/vs/workbench/parts/scm/electron-browser/scmFileDecorations.ts

@@ -70,7 +70,8 @@ class SCMDecorationsProvider implements IDecorationsProvider {
 			severity: Severity.Info,
 			tooltip: localize('tooltip', "{0} - {1}", resource.decorations.tooltip, this._provider.label),
 			color: this._config.fileDecorations.useColors ? resource.decorations.color : undefined,
-			icon: this._config.fileDecorations.useIcons ? { light: resource.decorations.icon, dark: resource.decorations.iconDark } : undefined
+			icon: this._config.fileDecorations.useIcons ? { light: resource.decorations.icon, dark: resource.decorations.iconDark } : undefined,
+			letter: resource.decorations.tooltip.charAt(0),
 		};
 	}
 }

src/vs/workbench/services/decorations/browser/decorations.ts

@@ -15,8 +15,9 @@ export const IResourceDecorationsService = createDecorator<IResourceDecorationsS
 
 export interface IResourceDecoration {
 	readonly severity: Severity;
-	readonly tooltip?: string;
 	readonly color?: ColorIdentifier;
+	readonly letter?: string;
+	readonly tooltip?: string;
 	readonly icon?: { light: URI, dark: URI };
 	readonly leafOnly?: boolean;
 }