added inline svg icons for many of the default filetypes

packages/application/style/icons.css

@@ -95,10 +95,6 @@
   background-image: var(--jp-icon-ellipses);
 }
 
-.jp-FileIcon {
-  background-image: var(--jp-icon-file);
-}
-
 .jp-FilledCircleIcon {
   background-image: var(--jp-icon-circle);
 }
@@ -115,14 +111,6 @@
   vertical-align: sub;
 }
 
-.jp-ImageIcon {
-  background-image: var(--jp-icon-image);
-}
-
-.jp-JsonIcon {
-  background-image: var(--jp-icon-json);
-}
-
 .jp-JupyterIcon {
   background-image: var(--jp-image-jupyter);
   background-size: 16px;
@@ -132,10 +120,6 @@
   padding-right: 0px;
 }
 
-.jp-KernelIcon {
-  background-image: var(--jp-icon-kernel);
-}
-
 .jp-KeyboardIcon {
   background-image: var(--jp-icon-keyboard);
 }
@@ -173,14 +157,6 @@
   background-image: var(--jp-icon-new-folder);
 }
 
-.jp-NotebookIcon {
-  background-image: var(--jp-icon-notebook);
-}
-
-.jp-FolderIcon {
-  background-image: var(--jp-icon-folder);
-}
-
 .jp-PasteIcon {
   background-image: var(--jp-icon-paste);
 }
@@ -241,12 +217,32 @@
   background-image: var(--jp-icon-vega);
 }
 
-.jp-QuestionMarkIcon {
-  background-image: var(--jp-icon-question-mark);
-}
-
 /* disabled/replaced by svg */
 
+/*.jp-FileIcon {*/
+/*  background-image: var(--jp-icon-file);*/
+/*}*/
+
+/*.jp-KernelIcon {*/
+/*  background-image: var(--jp-icon-kernel);*/
+/*}*/
+
+/*.jp-ImageIcon {*/
+/*  background-image: var(--jp-icon-image);*/
+/*}*/
+
+/*.jp-JsonIcon {*/
+/*  background-image: var(--jp-icon-json);*/
+/*}*/
+
+/*.jp-NotebookIcon {*/
+/*  background-image: var(--jp-icon-notebook);*/
+/*}*/
+
+/*.jp-FolderIcon {*/
+/*  background-image: var(--jp-icon-folder);*/
+/*}*/
+
 /*.jp-BuildIcon {*/
 /*  background-image: var(--jp-icon-build);*/
 /*}*/

packages/docregistry/src/registry.ts

@@ -1120,7 +1120,7 @@ export namespace DocumentRegistry {
     name: 'default',
     extensions: [],
     mimeTypes: [],
-    iconClass: 'jp-MaterialIcon jp-FileIcon',
+    iconClass: 'jp-FileIcon',
     iconLabel: '',
     contentType: 'file',
     fileFormat: 'text'
@@ -1171,7 +1171,7 @@ export namespace DocumentRegistry {
     extensions: ['.ipynb'],
     contentType: 'notebook',
     fileFormat: 'json',
-    iconClass: 'jp-MaterialIcon jp-NotebookIcon'
+    iconClass: 'jp-NotebookIcon'
   };
 
   /**
@@ -1183,7 +1183,7 @@ export namespace DocumentRegistry {
     extensions: [],
     mimeTypes: ['text/directory'],
     contentType: 'directory',
-    iconClass: 'jp-MaterialIcon jp-FolderIcon'
+    iconClass: 'jp-FolderIcon'
   };
 
   /**
@@ -1198,56 +1198,56 @@ export namespace DocumentRegistry {
       displayName: 'Markdown File',
       extensions: ['.md'],
       mimeTypes: ['text/markdown'],
-      iconClass: 'jp-MaterialIcon jp-MarkdownIcon'
+      iconClass: 'jp-MarkdownIcon'
     },
     {
       name: 'python',
       displayName: 'Python File',
       extensions: ['.py'],
       mimeTypes: ['text/x-python'],
-      iconClass: 'jp-MaterialIcon jp-PythonIcon'
+      iconClass: 'jp-PythonIcon'
     },
     {
       name: 'json',
       displayName: 'JSON File',
       extensions: ['.json'],
       mimeTypes: ['application/json'],
-      iconClass: 'jp-MaterialIcon jp-JsonIcon'
+      iconClass: 'jp-JsonIcon'
     },
     {
       name: 'csv',
       displayName: 'CSV File',
       extensions: ['.csv'],
       mimeTypes: ['text/csv'],
-      iconClass: 'jp-MaterialIcon jp-SpreadsheetIcon'
+      iconClass: 'jp-SpreadsheetIcon'
     },
     {
       name: 'tsv',
       displayName: 'TSV File',
       extensions: ['.tsv'],
       mimeTypes: ['text/csv'],
-      iconClass: 'jp-MaterialIcon jp-SpreadsheetIcon'
+      iconClass: 'jp-SpreadsheetIcon'
     },
     {
       name: 'r',
       displayName: 'R File',
       mimeTypes: ['text/x-rsrc'],
       extensions: ['.r'],
-      iconClass: 'jp-MaterialIcon jp-RKernelIcon'
+      iconClass: 'jp-RKernelIcon'
     },
     {
       name: 'yaml',
       displayName: 'YAML File',
       mimeTypes: ['text/x-yaml', 'text/yaml'],
       extensions: ['.yaml', '.yml'],
-      iconClass: 'jp-MaterialIcon jp-YamlIcon'
+      iconClass: 'jp-YamlIcon'
     },
     {
       name: 'svg',
       displayName: 'Image',
       mimeTypes: ['image/svg+xml'],
       extensions: ['.svg'],
-      iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconClass: 'jp-ImageIcon',
       fileFormat: 'base64'
     },
     {
@@ -1255,7 +1255,7 @@ export namespace DocumentRegistry {
       displayName: 'Image',
       mimeTypes: ['image/tiff'],
       extensions: ['.tif', '.tiff'],
-      iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconClass: 'jp-ImageIcon',
       fileFormat: 'base64'
     },
     {
@@ -1263,7 +1263,7 @@ export namespace DocumentRegistry {
       displayName: 'Image',
       mimeTypes: ['image/jpeg'],
       extensions: ['.jpg', '.jpeg'],
-      iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconClass: 'jp-ImageIcon',
       fileFormat: 'base64'
     },
     {
@@ -1271,7 +1271,7 @@ export namespace DocumentRegistry {
       displayName: 'Image',
       mimeTypes: ['image/gif'],
       extensions: ['.gif'],
-      iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconClass: 'jp-ImageIcon',
       fileFormat: 'base64'
     },
     {
@@ -1279,7 +1279,7 @@ export namespace DocumentRegistry {
       displayName: 'Image',
       mimeTypes: ['image/png'],
       extensions: ['.png'],
-      iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconClass: 'jp-ImageIcon',
       fileFormat: 'base64'
     },
     {
@@ -1287,7 +1287,7 @@ export namespace DocumentRegistry {
       displayName: 'Image',
       mimeTypes: ['image/bmp'],
       extensions: ['.bmp'],
-      iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconClass: 'jp-ImageIcon',
       fileFormat: 'base64'
     }
   ];

packages/ui-components/src/icon/iconregistry.tsx

@@ -40,7 +40,7 @@ export class IconRegistry implements IIconRegistry {
   }
 
   contains(name: string): boolean {
-    return name in this._svg;
+    return name in this._svg || name in this._classNameToName;
   }
 
   /**

packages/ui-components/style/icons/filetype/file.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+	<path class="jp-icon3" fill="#616161" d="M19.3,8.2l-5.5-5.5c-0.3-0.3-0.7-0.5-1.2-0.5H3.9C3.1,2.3,2.3,3.1,2.3,4v14.1c0,0.9,0.7,1.6,1.6,1.6h14.2
+	c0.9,0,1.6-0.7,1.6-1.6V9.4C19.8,8.9,19.6,8.5,19.3,8.2z M13.5,4.9l3.4,3.6h-3.4V4.9z M17.4,17.6l-12.7,0c-0.1,0-0.2,0-0.2-0.2V4.7
+	c0-0.2,0.1-0.3,0.2-0.3h7.2v4.4c0,0,0,0.8,0.3,1.1c0.3,0.3,1.1,0.3,1.1,0.3h4.3l0,7.2C17.6,17.4,17.5,17.6,17.4,17.6z"/>
+</svg>

packages/ui-components/style/icons/filetype/folder.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path class="jp-icon3" fill="#616161" d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>
+</svg>

packages/ui-components/style/icons/filetype/image.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+	<rect class="jp-icon-brand4" fill="#FFFFFF" x="2.2" y="2.2" width="17.5" height="17.5"/>
+	<path class="jp-icon-brand0" fill="#3F51B5" d="M2.2,2.2v17.5h17.5l0.1-17.5C19.8,2.2,2.2,2.2,2.2,2.2z M14.3,4.4c1.2,0,2.2,1,2.2,2.2s-1,2.2-2.2,2.2
+		s-2.2-1-2.2-2.2S13.1,4.4,14.3,4.4z M4.4,17.6l3.3-8.8l3.3,6.6l2.2-3.2l4.4,5.4H4.4z"/>
+</svg>

packages/ui-components/style/icons/filetype/json.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<g class="jp-icon-warn1" fill="#F9A825">
+	<g>
+		<path d="M20.2,11.8c-1.6,0-1.7,0.5-1.7,1c0,0.4,0.1,0.9,0.1,1.3c0.1,0.5,0.1,0.9,0.1,1.3c0,1.7-1.4,2.3-3.5,2.3h-0.9
+			v-1.9h0.5c1.1,0,1.4,0,1.4-0.8c0-0.3,0-0.6-0.1-1c0-0.4-0.1-0.8-0.1-1.2c0-1.3,0-1.8,1.3-2l0,0c-1.3-0.2-1.3-0.7-1.3-2
+			c0-0.4,0.1-0.8,0.1-1.2c0.1-0.4,0.1-0.7,0.1-1c0-0.8-0.4-0.7-1.4-0.8h-0.5V4.1h0.9c2.2,0,3.5,0.7,3.5,2.3c0,0.4-0.1,0.9-0.1,1.3
+			c-0.1,0.5-0.1,0.9-0.1,1.3c0,0.5,0.2,1,1.7,1C20.2,10,20.2,11.8,20.2,11.8z"/>
+		<g>
+			<path d="M1.8,10.1c1.6,0,1.7-0.5,1.7-1c0-0.4-0.1-0.9-0.1-1.3C3.3,7.3,3.3,6.9,3.3,6.5c0-1.6,1.4-2.3,3.5-2.3h0.9
+				v1.9H7.2c-1,0-1.4,0-1.4,0.8c0,0.3,0,0.6,0.1,1c0,0.2,0.1,0.6,0.1,1c0,1.3,0,1.8-1.3,2l0,0C6,11.2,6,11.7,6,13
+				c0,0.4-0.1,0.8-0.1,1.2c-0.1,0.3-0.1,0.7-0.1,1C5.8,16,6.1,16,7.2,16h0.5v1.9H6.8c-2.1,0-3.5-0.6-3.5-2.3c0-0.4,0.1-0.9,0.1-1.3
+				c0.1-0.5,0.1-0.9,0.1-1.3c0-0.5-0.2-1-1.7-1V10.1z"/>
+		</g>
+	</g>
+	<circle cx="11" cy="13.8" r="2.1"/>
+	<circle cx="11" cy="8.2" r="2.1"/>
+</g>
+</svg>

packages/ui-components/style/icons/filetype/markdown.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<g class="jp-icon-purple0" fill="#7B1FA2">
+	<polygon points="5,14.9 17,14.9 10.9,20.9 "/>
+	<path d="M14.4,8.1c0-1.3-0.1-2.9-0.1-4.5l0,0C13.9,5,13.4,6.5,13,7.9l-1.3,4.3h-2L8.5,7.9C8.1,6.6,7.8,5,7.5,3.6l0,0
+		C7.4,5.2,7.4,6.8,7.3,8.2L7,12.4H4.8l0.7-11h3.3L10,5c0.4,1.2,0.7,2.7,1,3.9l0,0c0.3-1.2,0.7-2.6,1-3.9l1.2-3.7h3.3l0.6,11h-2.4
+		L14.4,8.1z"/>
+</g>
+</svg>

packages/ui-components/style/icons/filetype/notebook.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<g class="jp-icon-warn0" fill="#EF6C00">
+	<path class="st1" d="M18.7,3.3v15.4H3.3V3.3H18.7 M20.2,1.8H1.8v18.3h18.3l0,0L20.2,1.8L20.2,1.8z"/>
+	<polygon class="st1" points="16.5,16.5 11.1,12.2 5.5,16.5 5.5,5.5 16.5,5.5 	"/>
+</g>
+</svg>