fixed sidebar tab icons; styling still isn't right

currently can't use two different styles for tab icons passed to phosphor.
Also in this commit: an experiment in constructing a bare svg react component
from a raw string (contained in jlicon.tsx)

packages/docregistry/src/default.ts

@@ -389,12 +389,6 @@ export abstract class ABCWidgetFactory<
     // Create the new widget
     const widget = this.createNewWidget(context, source);
 
-    const ft = this._fileTypes[0];
-    if (ft) {
-      widget.title.iconClass = ft.iconClass;
-      widget.title.iconLabel = ft.iconLabel;
-      widget.title.iconPass = ft.iconPass;
-    }
     // Add toolbar items
     let items: DocumentRegistry.IToolbarItem[];
     if (this._toolbarFactory) {

packages/tabmanager-extension/src/index.ts

@@ -8,11 +8,9 @@ import {
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 
-import { TabBarSvg } from '@jupyterlab/ui-components';
-
 import { each } from '@lumino/algorithm';
 
-import { Widget } from '@lumino/widgets';
+import { TabBar, Widget } from '@lumino/widgets';
 
 /**
  * The default tab manager extension.
@@ -25,10 +23,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
     restorer: ILayoutRestorer | null
   ): void => {
     const { shell } = app;
-    const tabs = new TabBarSvg<Widget>({
-      kind: 'tabManager',
-      orientation: 'vertical'
-    });
+    const tabs = new TabBar<Widget>({ orientation: 'vertical' });
     const header = document.createElement('header');
 
     if (restorer) {

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

@@ -41,6 +41,7 @@ export class JLIcon {
 
   element({
     className,
+    container,
     title,
     tag = 'div',
     ...propsStyle
@@ -57,7 +58,7 @@ export class JLIcon {
       return null;
     }
 
-    const container = document.createElement(tag);
+    container = container || document.createElement(tag);
     container.appendChild(svgElement);
     container.className = classNames;
     return container;
@@ -73,9 +74,44 @@ export class JLIcon {
   }
 
   protected _initReact() {
+    // const component = React.forwardRef(
+    //   (
+    //     { className, container, title, tag = 'div', ...propsStyle }: JLIcon.IProps = {},
+    //     ref: React.RefObject<HTMLDivElement>
+    //   ) => {
+    //     // const Tag = tag;
+    //     // const classNames = classes(
+    //     //   className,
+    //     //   propsStyle ? iconStyle(propsStyle) : ''
+    //     // );
+    //
+    //     // ensure that svg html is valid
+    //     const svgElement = this.resolveSvg(title);
+    //     if (!svgElement) {
+    //       // bail if failing silently
+    //       return <></>;
+    //     }
+    //
+    //     const attrs = svgElement.getAttributeNames().reduce((d, name) => {d[name] = svgElement.getAttribute(name); return d}, ({} as any));
+    //
+    //     return (
+    //       <svg
+    //         {...attrs}
+    //         dangerouslySetInnerHTML={{ __html: svgElement.innerHTML }}
+    //       />
+    //     );
+    //   }
+    // );
+
     const component = React.forwardRef(
       (
-        { className, title, tag = 'div', ...propsStyle }: JLIcon.IProps = {},
+        {
+          className,
+          container,
+          title,
+          tag = 'div',
+          ...propsStyle
+        }: JLIcon.IProps = {},
         ref: React.RefObject<HTMLDivElement>
       ) => {
         const Tag = tag;
@@ -124,6 +160,7 @@ export namespace JLIcon {
      */
     className?: string;
 
+    container?: HTMLElement;
     /**
      * HTML element tag of the icon's outermost node, which acts as a
      * container for the actual svg node