[file icons] support for font icons

src/vs/workbench/parts/files/browser/media/explorerviewlet.css

@@ -31,13 +31,20 @@
 
 .explorer-viewlet .explorer-folders-view.show-file-icons .folder-icon::before,
 .explorer-viewlet .explorer-folders-view.show-file-icons .file-icon::before {
+	/* svg icons rendered as background image */
 	background-size: 16px;
 	background-position: left center;
 	background-repeat: no-repeat;
-	padding: 3px 6px 3px 0px;
+	padding-right: 4px;
 	width: 16px;
-	height: 16px;
+	height: 22px;
 	display: inline-block;
+
+	/* fonts icons */
+	vertical-align: top;
+	font-size: 16px;
+	-webkit-font-smoothing: antialiased;
+
 }
 
 .explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row > .content > .monaco-action-bar {

src/vs/workbench/services/themes/electron-browser/themeService.ts

@@ -128,6 +128,9 @@ interface IInternalThemeData extends IThemeData {
 
 interface FileIconDefinition {
 	iconPath: string;
+	color: string;
+	content: string;
+	fontSize: string;
 }
 
 interface FileIconsAssociation {
@@ -141,6 +144,7 @@ interface FileIconsAssociation {
 
 interface FileIconsDocument extends FileIconsAssociation {
 	iconDefinitions: { [key:string]: FileIconDefinition };
+	font: { family: string; weight: string; style: string; src: {path:string, format:string}[] };
 	light?: FileIconsAssociation;
 	highContrast?: FileIconsAssociation;
 }
@@ -447,6 +451,10 @@ function _processFileIconsObject(id: string, fileIconsPath: string, fileIconsDoc
 	}
 	let selectorByDefinitionId : {[def:string]:string[]} = {};
 
+	function resolvePath(path: string) {
+		return Paths.join(Paths.dirname(fileIconsPath), path);
+	}
+
 	function collectSelectors(associations: FileIconsAssociation, baseThemeClassName?: string) {
 		function addSelector(selector: string, defId: string) {
 			if (defId) {
@@ -494,13 +502,34 @@ function _processFileIconsObject(id: string, fileIconsPath: string, fileIconsDoc
 	collectSelectors(fileIconsDocument.highContrast, '.hc_black');
 
 	let cssRules: string[] = [];
+
+	let font = fileIconsDocument.font;
+	if (font) {
+		let src = font.src.map(l => `url('${resolvePath(l.path)}') format('${l.format}')`).join(', ');
+		cssRules.push(`@font-face { src: ${src}; font-family: '${font.family}'; font-weigth: ${font.weight}; font-style: ${font.style}; }`);
+
+		cssRules.push(`.file-icon::before, .folder-icon::before { font-family: '${font.family}';}`);
+	}
+
 	for (let defId in selectorByDefinitionId) {
 		let selectors = selectorByDefinitionId[defId];
 		let definition = fileIconsDocument.iconDefinitions[defId];
 		if (definition) {
 			if (definition.iconPath) {
-				let path = Paths.join(Paths.dirname(fileIconsPath), definition.iconPath);
-				cssRules.push(`${selectors.join(', ')} { content: ' '; background-image: url("${path}");}`);
+				cssRules.push(`${selectors.join(', ')} { content: ' '; background-image: url("${resolvePath(definition.iconPath)}"); }`);
+			}
+			if (definition.content || definition.color) {
+				let body = '';
+				if (definition.color) {
+					body += ` color: ${definition.color};`;
+				}
+				if (definition.content) {
+					body += ` content: '${definition.content}';`;
+				}
+				if (definition.fontSize) {
+					body += ` font-size: ${definition.fontSize};`;
+				}
+				cssRules.push(`${selectors.join(', ')} { ${body} }`);
 			}
 		}
 	}