css cleanup. The only non-theme svg left is jupyter-favicon.svg

packages/application/style/images.css

@@ -4,64 +4,93 @@
 |----------------------------------------------------------------------------*/
 
 /* CSS for generic svg icons */
-.jp-icon-fill0 {
+/* recolor the primary elements of an icon */
+.jp-icon0[fill] {
   fill: var(--jp-ui-font-color0);
 }
-.jp-icon-fill1 {
+.jp-icon1[fill] {
   fill: var(--jp-ui-font-color1);
 }
-.jp-icon-fill2 {
+.jp-icon2[fill] {
   fill: var(--jp-ui-font-color2);
 }
-.jp-icon-fill3 {
+.jp-icon3[fill] {
   fill: var(--jp-ui-font-color3);
 }
 
-.jp-icon-stroke0 {
+.jp-icon0[stroke] {
   stroke: var(--jp-ui-font-color0);
 }
-.jp-icon-stroke1 {
+.jp-icon1[stroke] {
   stroke: var(--jp-ui-font-color1);
 }
-.jp-icon-stroke2 {
+.jp-icon2[stroke] {
   stroke: var(--jp-ui-font-color2);
 }
-.jp-icon-stroke3 {
+.jp-icon3[stroke] {
   stroke: var(--jp-ui-font-color3);
 }
 
-.jp-icon-fill-accent0 {
+/* recolor the accent elements of an icon */
+.jp-icon-accent0[fill] {
   fill: var(--jp-layout-color0);
 }
-.jp-icon-fill-accent1 {
+.jp-icon-accent1[fill] {
   fill: var(--jp-layout-color1);
 }
-.jp-icon-fill-accent2 {
+.jp-icon-accent2[fill] {
   fill: var(--jp-layout-color2);
 }
-.jp-icon-fill-accent3 {
+.jp-icon-accent3[fill] {
   fill: var(--jp-layout-color3);
 }
-.jp-icon-fill-accent4 {
+.jp-icon-accent4[fill] {
   fill: var(--jp-layout-color4);
 }
 
-.jp-icon-stroke-accent0 {
+.jp-icon-accent0[stroke] {
   stroke: var(--jp-layout-color0);
 }
-.jp-icon-stroke-accent1 {
+.jp-icon-accent1[stroke] {
   stroke: var(--jp-layout-color1);
 }
-.jp-icon-stroke-accent2 {
+.jp-icon-accent2[stroke] {
   stroke: var(--jp-layout-color2);
 }
-.jp-icon-stroke-accent3 {
+.jp-icon-accent3[stroke] {
   stroke: var(--jp-layout-color3);
 }
-.jp-icon-stroke-accent4 {
+.jp-icon-accent4[stroke] {
   stroke: var(--jp-layout-color4);
 }
 
+/* misc icons colors taken from the theme stylesheets */
+.jp-icon-brand0[fill] {
+  fill: var(--jp-brand-color0);
+}
+.jp-icon-brand1[fill] {
+  fill: var(--jp-brand-color1);
+}
+.jp-icon-brand2[fill] {
+  fill: var(--jp-brand-color2);
+}
+.jp-icon-brand3[fill] {
+  fill: var(--jp-brand-color3);
+}
+
+.jp-icon-brand0[stroke] {
+  stroke: var(--jp-brand-color0);
+}
+.jp-icon-brand1[stroke] {
+  stroke: var(--jp-brand-color1);
+}
+.jp-icon-brand2[stroke] {
+  stroke: var(--jp-brand-color2);
+}
+.jp-icon-brand3[stroke] {
+  stroke: var(--jp-brand-color3);
+}
+
 /* CSS for specific icons */
 
 .jp-ImageJupyterLab {

packages/coreutils/src/tokens.ts

@@ -269,6 +269,11 @@ export namespace ISettingRegistry {
      */
     'jupyter.lab.setting-icon-label'?: string;
 
+    /**
+     * The JupyterLab icon name, for loading through IconRegistry.
+     */
+    'jupyter.lab.setting-icon-name'?: string;
+
     /**
      * A flag that indicates plugin should be transformed before being used by
      * the setting registry.

packages/filebrowser/tsconfig.json

@@ -23,6 +23,9 @@
     },
     {
       "path": "../statusbar"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

packages/htmlviewer-extension/tsconfig.json

@@ -17,9 +17,6 @@
     },
     {
       "path": "../htmlviewer"
-    },
-    {
-      "path": "../ui-components"
     }
   ]
 }

packages/notebook/src/truststatus.tsx

@@ -45,9 +45,9 @@ function NotebookTrustComponent(
   props: NotebookTrustComponent.IProps
 ): React.ReactElement<NotebookTrustComponent.IProps> {
   if (props.allCellsTrusted) {
-    return <IconX name="trusted" offset={{ x: 0, y: 2 }} />;
+    return <IconX name="trusted" top={2} />;
   } else {
-    return <IconX name="not-trusted" offset={{ x: 0, y: 2 }} />;
+    return <IconX name="not-trusted" top={2} />;
   }
 }
 

packages/settingeditor/src/pluginlist.tsx

@@ -5,6 +5,8 @@
 
 import { ISettingRegistry } from '@jupyterlab/coreutils';
 
+import { IconX } from '@jupyterlab/ui-components';
+
 import { Message } from '@phosphor/messaging';
 
 import { ISignal, Signal } from '@phosphor/signaling';
@@ -194,6 +196,12 @@ namespace Private {
    */
   const ICON_LABEL_KEY = 'jupyter.lab.setting-icon-label';
 
+  /**e
+   * The JupyterLab plugin schema key for IconRegistry name
+   * of the setting editor icon of a plugin
+   */
+  const ICON_NAME_KEY = 'jupyter.lab.setting-icon-name';
+
   /**
    * Check the plugin for a rendering hint's value.
    *
@@ -253,7 +261,7 @@ namespace Private {
       const { id, schema, version } = plugin;
       const itemTitle = `${schema.description}\n${id}\n${version}`;
       const image = getHint(ICON_CLASS_KEY, registry, plugin);
-      const iconClass = `jp-MaterialIcon jp-PluginList-icon${
+      const iconClass = `jp-PluginList-icon${
         image ? ' ' + image : ''
       }`;
       const iconTitle = getHint(ICON_LABEL_KEY, registry, plugin);
@@ -265,7 +273,16 @@ namespace Private {
           key={id}
           title={itemTitle}
         >
-          <span className={iconClass} title={iconTitle} />
+          {iconName ? (
+            <IconX
+              tag={'span'}
+              name={iconName}
+              className={iconClass}
+              title={iconTitle}
+            />
+          ) : (
+            <span className={iconClass} title={iconTitle} />
+          )}
           <span>{schema.title || id}</span>
         </li>
       );

packages/settingeditor/tsconfig.json

@@ -20,6 +20,9 @@
     },
     {
       "path": "../rendermime"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

packages/statusbar-extension/schema/plugin.json

@@ -1,6 +1,7 @@
 {
   "jupyter.lab.setting-icon-class": "jp-SettingsIcon",
   "jupyter.lab.setting-icon-label": "Status Bar",
+  "jupyter.lab.setting-icon-name": "status-bar",
   "title": "Status Bar",
   "description": "Status Bar settings.",
   "properties": {

packages/statusbar-extension/style/status-bar-icon.svg

@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon-stroke3" d="M0.75 19.25V0.75H19.25V19.25H0.75Z" transform="translate(2 2)" stroke="#757575" stroke-width="1.5"/>
-    <rect class="jp-icon-fill3" width="12.7273" height="12.7273" transform="translate(5.63647 5.63672)" fill="#757575"/>
-    <path class="jp-icon-accent1" d="M0 0H11.8182V0.818182C11.8182 1.37047 11.3705 1.81818 10.8182 1.81818H0V0Z" transform="translate(4.72729 13.8164)" fill="white"/>
-</svg>

packages/statusbar/src/defaults/runningSessions.tsx

@@ -36,11 +36,11 @@ function RunningSessionsComponent(
     <GroupItem spacing={HALF_SPACING} onClick={props.handleClick}>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.terminals} />
-        <IconX name={'terminal'} offset={{ x: 1, y: 3 }} />
+        <IconX name={'terminal'} left={1} top={3} />
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <IconX name={'kernel'} offset={{ x: 0, y: 2 }} />
+        <IconX name={'kernel'} top={2} />
       </GroupItem>
     </GroupItem>
   );

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

@@ -12,59 +12,29 @@ import icon from '../style/icon';
 
 // functions for setting up icons
 
-type SvgPropsX = { name: string } & React.HTMLAttributes<SVGElement>;
+type SvgPropsX = { name: string; tag?: 'div' | 'span' } & React.HTMLAttributes<
+  HTMLDivElement
+>; //& React.HTMLAttributes<SVGElement>;
 
 export function SvgX(props: SvgPropsX): React.ReactElement {
-  const { name, className } = props;
+  const { name, tag, ...rest } = props;
+  const Tag = tag || 'div';
   return (
-    <div
-      className={className}
+    <Tag
+      {...rest}
       dangerouslySetInnerHTML={{ __html: defaultIconRegistry.svg(name) }}
     />
   );
-  // return <div className={className}>{defaultIconRegistry.svg(name)}</div>;
 }
 
 export function IconX(
-  props: { offset: { x: number; y: number } } & SvgPropsX
+  props: { left?: number; top?: number } & SvgPropsX
 ): React.ReactElement {
-  const { className, offset, ...rest } = props;
-  return <SvgX className={classes(className, style(icon(offset)))} {...rest} />;
-  // return <div className={ classes(className, style(icon(offset))) }>{defaultIconRegistry.svg(name)}</div>;
+  const { className, left, top, ...rest } = props;
+  return (
+    <SvgX
+      className={classes(className, style(icon({ left, top })))}
+      {...rest}
+    />
+  );
 }
-
-// export class IconRegistryX extends IconRegistry {
-//   iconX(props: IconPropsX): React.ReactElement {
-//     const {name, className, offset} = props;
-//     return <div className={ classes(className, style(icon(offset))) }>{this.svg(name)}</div>;
-//   }
-// }
-//
-// export const defaultIconRegistryX: IconRegistryX = new IconRegistryX();
-//
-// /**
-//  * A namespace for SvgIcon statics.
-//  */
-// export namespace SvgIcon {
-//   /**
-//    * Props for an SvgIcon
-//    */
-//   export interface IProps {
-//     /**
-//      * The inline svg
-//      */
-//     Svg: ComponentType<HTMLAttributes<SVGElement>>;
-//   }
-// }
-//
-// export function SvgIcon(props: SvgIcon.IProps & IconPropsX): React.ReactElement<SvgIcon.IProps> {
-//   const { Svg, className, offset, ...rest } = props;
-//   return <Svg className={classes(className, style(icon(offset)))} {...rest} />;
-// }
-//
-// export function IconFactory(
-//   props: SvgIcon.IProps
-// ): (props: IconPropsX) => React.ReactElement<SvgIcon.IProps> {
-//   const { Svg } = props;
-//   return (props: IconPropsX) => <SvgIcon Svg={Svg} {...props} />;
-// }

packages/ui-components/src/icon/icon.ts

@@ -1,22 +1,41 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+/**
+ * To add an icon to the defaultIconRegistry requires two lines of code:
+ *   1. import the icon's .svg
+ *   2. add a relevant entry to _defaultIcons
+ */
+
+/* tslint:disable */
 import html5Svg from '../../style/icons/html5-icon.svg';
 import kernelSvg from '../../style/icons/kernel-icon.svg';
 import lineFormSvg from '../../style/icons/line-form-icon.svg';
 import notTrustedSvg from '../../style/icons/not-trusted-icon.svg';
+import statusBarSvg from '../../style/icons/status-bar-icon.svg';
 import terminalSvg from '../../style/icons/terminal-icon.svg';
 import trustedSvg from '../../style/icons/trusted-icon.svg';
 
+const _defaultIcons: ReadonlyArray<IconRegistry.IModel> = [
+  { name: 'html5', svg: html5Svg },
+  { name: 'kernel', svg: kernelSvg },
+  { name: 'line-form', svg: lineFormSvg },
+  { name: 'not-trusted', svg: notTrustedSvg },
+  { name: 'status-bar', svg: statusBarSvg },
+  { name: 'terminal', svg: terminalSvg },
+  { name: 'trusted', svg: trustedSvg }
+];
+/* tslint:enable */
+
 /**
- * The icon registry.
+ * The icon registry class.
  */
 export class IconRegistry {
   constructor(...icons: IconRegistry.IModel[]) {
     if (icons.length) {
       this.addIcon(...icons);
     } else {
-      this.addIcon(...IconRegistry.defaultIcons);
+      this.addIcon(..._defaultIcons);
     }
   }
 
@@ -27,12 +46,8 @@ export class IconRegistry {
   }
 
   icon(name: string, title?: string): HTMLElement {
-    if (!this._svgs[name]) {
-      console.warn(`Invalid icon name: ${name}`);
-    }
-
     if (title) {
-      let svgNode = Private.parseSvg(this._svgs[name]);
+      let svgNode = Private.parseSvg(this.svg(name));
       let titleNodes = svgNode.getElementsByTagName('title');
       if (titleNodes) {
         titleNodes[0].textContent = title;
@@ -43,11 +58,15 @@ export class IconRegistry {
       }
       return svgNode;
     } else {
-      return Private.parseSvg(this._svgs[name]);
+      return Private.parseSvg(this.svg(name));
     }
   }
 
   svg(name: string): string {
+    if (!(name in this._svgs)) {
+      console.error(`Invalid icon name: ${name}`);
+    }
+
     return this._svgs[name];
   }
 
@@ -64,24 +83,20 @@ export class IconRegistry {
   private _svgs: { [key: string]: string } = Object.create(null);
 }
 
+/**
+ * The defaultIconRegistry instance.
+ */
+export const defaultIconRegistry: IconRegistry = new IconRegistry();
+
 export namespace IconRegistry {
   export interface IModel {
     name: string;
     svg: string;
   }
 
-  export const defaultIcons: ReadonlyArray<IModel> = [
-    { name: 'html5', svg: html5Svg },
-    { name: 'kernel', svg: kernelSvg },
-    { name: 'line-form', svg: lineFormSvg },
-    { name: 'not-trusted', svg: notTrustedSvg },
-    { name: 'terminal', svg: terminalSvg },
-    { name: 'trusted', svg: trustedSvg }
-  ];
+  export const defaultIcons = _defaultIcons;
 }
 
-export const defaultIconRegistry: IconRegistry = new IconRegistry();
-
 namespace Private {
   export function parseSvg(svg: string): HTMLElement {
     let parser = new DOMParser();

packages/ui-components/src/style/icon.ts

@@ -4,7 +4,10 @@
 import vars from './variables';
 import { NestedCSSProperties } from 'typestyle/lib/types';
 
-export default ({ x, y }: { x: number; y: number }): NestedCSSProperties => {
+export default (props: {
+  left?: number;
+  top?: number;
+}): NestedCSSProperties => {
   return {
     minHeight: vars.iconMinHeight,
     $nest: {
@@ -12,8 +15,8 @@ export default ({ x, y }: { x: number; y: number }): NestedCSSProperties => {
         height: vars.iconHeight,
         width: vars.iconWidth,
         position: 'relative',
-        left: `${x}px`,
-        top: `${y}px`
+        left: `${props.left ? props.left : 0}px`,
+        top: `${props.top ? props.top : 0}px`
       }
     }
   };

packages/ui-components/style/icons/html5-icon.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 	<title>HTML5 Logo</title>
-	<path class="jp-icon-fill0" d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
+	<path class="jp-icon0" d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
 	<path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512"/>
 	<path fill="#f16529" d="M256 480.5V131H404.3L376 447"/>
 	<path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"/>

packages/ui-components/style/icons/kernel-icon.svg

@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="24" height="24" fill="black" fill-opacity="0"/>
     <rect width="18" height="20" fill="black" fill-opacity="0" transform="translate(3 2)"/>
-    <path class="jp-icon-stroke1" d="M4.10885 6.74135C4.20452 6.21505 4.39041 5.72544 4.80634 5.09319C5.35203 4.43482 6.35067 3.89653 7.68975 3.52838C9.02471 3.16136 10.5654 3 11.9998 3C13.4341 3 14.9749 3.16136 16.3098 3.52838C17.649 3.89655 18.6477 4.43488 19.1933 5.0933C19.6095 5.72557 19.7955 6.21514 19.8912 6.74139C19.9967 7.32185 20 7.97294 20 9C20 9.35129 19.7844 10.7386 19.2911 12.4034C18.8013 14.0565 18.0953 15.7799 17.2191 16.8753C16.7844 17.4188 16.3844 17.8059 16.0618 18.0944C15.9489 18.1953 15.8534 18.2774 15.7609 18.3569C15.7136 18.3976 15.6672 18.4375 15.6196 18.4789C15.5062 18.5777 15.3431 18.7207 15.2198 18.8745C14.9711 19.1847 14.7469 19.4839 14.5613 19.7317C14.4709 19.8523 14.3897 19.9607 14.3193 20.0523C14.0816 20.3611 13.9259 20.5338 13.777 20.6516C13.5455 20.8348 13.1949 21 11.9998 21C10.8047 21 10.4542 20.8348 10.2229 20.6517C10.074 20.5339 9.91841 20.3612 9.68072 20.0523C9.61032 19.9609 9.52922 19.8526 9.43901 19.7322C9.25332 19.4843 9.02907 19.1849 8.78025 18.8745C8.5646 18.6055 8.27898 18.3643 8.04285 18.1648C7.98552 18.1164 7.93111 18.0704 7.88133 18.0271C7.58713 17.7713 7.22852 17.4348 6.78084 16.8753C5.90445 15.7799 5.19851 14.0565 4.70872 12.4034C4.21548 10.7387 4 9.35134 4 9C4 7.97301 4.00333 7.32185 4.10885 6.74135Z" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon-fill1" d="M15.9999 18C15.9999 19 14 22 12 22C10 22 8 19 8 18C8 14.9624 10.067 11 12 11C13.933 11 15.9999 14.9624 15.9999 18Z" fill="#333333"/>
+    <path class="jp-icon1" d="M4.10885 6.74135C4.20452 6.21505 4.39041 5.72544 4.80634 5.09319C5.35203 4.43482 6.35067 3.89653 7.68975 3.52838C9.02471 3.16136 10.5654 3 11.9998 3C13.4341 3 14.9749 3.16136 16.3098 3.52838C17.649 3.89655 18.6477 4.43488 19.1933 5.0933C19.6095 5.72557 19.7955 6.21514 19.8912 6.74139C19.9967 7.32185 20 7.97294 20 9C20 9.35129 19.7844 10.7386 19.2911 12.4034C18.8013 14.0565 18.0953 15.7799 17.2191 16.8753C16.7844 17.4188 16.3844 17.8059 16.0618 18.0944C15.9489 18.1953 15.8534 18.2774 15.7609 18.3569C15.7136 18.3976 15.6672 18.4375 15.6196 18.4789C15.5062 18.5777 15.3431 18.7207 15.2198 18.8745C14.9711 19.1847 14.7469 19.4839 14.5613 19.7317C14.4709 19.8523 14.3897 19.9607 14.3193 20.0523C14.0816 20.3611 13.9259 20.5338 13.777 20.6516C13.5455 20.8348 13.1949 21 11.9998 21C10.8047 21 10.4542 20.8348 10.2229 20.6517C10.074 20.5339 9.91841 20.3612 9.68072 20.0523C9.61032 19.9609 9.52922 19.8526 9.43901 19.7322C9.25332 19.4843 9.02907 19.1849 8.78025 18.8745C8.5646 18.6055 8.27898 18.3643 8.04285 18.1648C7.98552 18.1164 7.93111 18.0704 7.88133 18.0271C7.58713 17.7713 7.22852 17.4348 6.78084 16.8753C5.90445 15.7799 5.19851 14.0565 4.70872 12.4034C4.21548 10.7387 4 9.35134 4 9C4 7.97301 4.00333 7.32185 4.10885 6.74135Z" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon1" d="M15.9999 18C15.9999 19 14 22 12 22C10 22 8 19 8 18C8 14.9624 10.067 11 12 11C13.933 11 15.9999 14.9624 15.9999 18Z" fill="#333333"/>
 </svg>

packages/ui-components/style/icons/not-trusted-icon.svg

@@ -1,5 +1,5 @@
 <svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon-stroke1" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon-stroke1" d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon-stroke1" d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon1" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon1" d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon1" d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#333333" stroke-width="2"/>
 </svg>

packages/vdom-extension/style/react.svg → packages/ui-components/style/icons/react-icon.svg

@@ -4,7 +4,7 @@
 <svg version="1.1" id="Layer_2_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 841.9 595.3" enable-background="new 0 0 841.9 595.3" xml:space="preserve">
 <g>
-	<path fill="#61DAFB" d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3
+	<path class="jp-icon-brand2" fill="#61DAFB" d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3
 		c4.6,0,8.3,0.9,11.4,2.6c13.6,7.8,19.5,37.5,14.9,75.7c-1.1,9.4-2.9,19.3-5.1,29.4c-19.6-4.8-41-8.5-63.5-10.9
 		c-13.5-18.5-27.5-35.3-41.6-50c32.6-30.3,63.2-46.9,84-46.9l0-22.3c0,0,0,0,0,0c-27.5,0-63.5,19.6-99.9,53.6
 		c-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6c-14,14.7-28,31.4-41.3,49.9c-22.6,2.4-44,6.1-63.6,11
@@ -28,8 +28,8 @@
 		c14-14.7,28-31.4,41.3-49.9c22.6-2.4,44-6.1,63.6-11C544.3,394.8,546.1,404.5,547.2,413.8z M585.7,347.1c-8.6,3.7-18,7-27.7,10.1
 		c-5.7-19.6-13.2-40-22.5-60.9c9.2-20.8,16.6-41.1,22.2-60.6c9.9,3.1,19.3,6.5,28.1,10.2c35.4,15.1,58.3,34.9,58.3,50.6
 		C644,312.2,621.1,332.1,585.7,347.1z"/>
-	<polygon fill="#61DAFB" points="320.8,78.4 320.8,78.4 320.8,78.4 	"/>
-	<circle fill="#61DAFB" cx="420.9" cy="296.5" r="45.7"/>
-	<polygon fill="#61DAFB" points="520.5,78.1 520.5,78.1 520.5,78.1 	"/>
+	<polygon class="jp-icon-brand2" fill="#61DAFB" points="320.8,78.4 320.8,78.4 320.8,78.4 	"/>
+	<circle class="jp-icon-brand2" fill="#61DAFB" cx="420.9" cy="296.5" r="45.7"/>
+	<polygon class="jp-icon-brand2" fill="#61DAFB" points="520.5,78.1 520.5,78.1 520.5,78.1 	"/>
 </g>
 </svg>

packages/ui-components/style/icons/status-bar-icon.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="jp-icon3" d="M0.75 19.25V0.75H19.25V19.25H0.75Z" transform="translate(2 2)" stroke="#757575" stroke-width="1.5"/>
+    <rect class="jp-icon3" width="12.7273" height="12.7273" transform="translate(5.63647 5.63672)" fill="#757575"/>
+    <path class="jp-icon-accent1" d="M0 0H11.8182V0.818182C11.8182 1.37047 11.3705 1.81818 10.8182 1.81818H0V0Z" transform="translate(4.72729 13.8164)" fill="white"/>
+</svg>

packages/ui-components/style/icons/trusted-icon.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon-stroke1" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon-fill1 jp-icon-stroke1" d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#333333" stroke="#333333"/>
+    <path class="jp-icon1" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon1" d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#333333" stroke="#333333"/>
 </svg>

packages/vdom-extension/src/index.ts

@@ -82,7 +82,8 @@ const plugin: JupyterFrontEndPlugin<IVDOMTracker> = {
       name: 'vdom',
       mimeTypes: [MIME_TYPE],
       extensions: ['.vdom', '.vdom.json'],
-      iconClass: CSS_ICON_CLASS
+      iconClass: CSS_ICON_CLASS,
+      iconName: 'react'
     });
 
     const factory = new MimeDocumentFactory({

packages/vdom-extension/style/base.css

@@ -1,29 +0,0 @@
-/**
-  Copyright (c) Jupyter Development Team.
-  Distributed under the terms of the Modified BSD License.
-*/
-
-/* Add CSS variables to :root */
-:root {
-  --jp-icon-vdom: url('./react.svg');
-}
-
-/* Base styles */
-.jp-RenderedVDOM {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  overflow: auto;
-}
-
-/* Document styles */
-.jp-MimeDocument .jp-RenderedVDOM {
-  padding: 5px;
-}
-
-/* Document icon */
-.jp-VDOMIcon {
-  background-image: var(--jp-icon-vdom);
-  background-size: 24px;
-  background-position: center !important;
-}

packages/vdom-extension/style/index.css

@@ -10,5 +10,3 @@
 @import url('~@jupyterlab/application/style/index.css');
 @import url('~@jupyterlab/notebook/style/index.css');
 @import url('~@jupyterlab/vdom/style/index.css');
-
-@import url('./base.css');