Add NNI icon in JupyterLab extension

ts/jupyter_extension/src/index.ts

@@ -2,6 +2,17 @@ import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application'
 import { ICommandPalette, IFrame } from '@jupyterlab/apputils';
 import { PageConfig } from '@jupyterlab/coreutils';
 import { ILauncher } from '@jupyterlab/launcher';
+import { LabIcon } from '@jupyterlab/ui-components';
+
+const nniIconSvg = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 84">
+  <polygon fill="#0b6bac" points="0,84 12,84 34,18 56,84 68,84 87,27 75,27 62,66 40,0 28,0 0,84"/>
+  <polygon fill="#0b6bac" points="94,84 106,84 125,27 113,27 100,66 90,36 84,54 94,84"/>
+  <polygon fill="#0b6bac" points="122,0 128,18 140,18 134,0 122,0"/>
+  <polygon fill="#0b6bac" points="131,27 150,84 162,84 143,27 131,27"/>
+</svg>
+`;
+const nniIcon = new LabIcon({ name: 'nni', svgstr: nniIconSvg });
 
 class NniWidget extends IFrame {
     constructor() {
@@ -14,6 +25,7 @@ class NniWidget extends IFrame {
         this.url = PageConfig.getBaseUrl() + 'nni/index';
         this.id = 'nni';
         this.title.label = 'NNI';
+        this.title.icon = nniIcon;
         this.title.closable = true;
     }
 }
@@ -27,7 +39,7 @@ async function activate(app: JupyterFrontEnd, palette: ICommandPalette, launcher
     commands.addCommand(command, {
         label: 'NNI',
         caption: 'NNI',
-        iconClass: (args) => (args.isPalette ? null : 'jp-Launcher-kernelIcon'),
+        icon: (args) => (args.isPalette ? null : nniIcon),
         execute: () => {
             shell.add(new NniWidget(), 'main');
         }
@@ -36,11 +48,7 @@ async function activate(app: JupyterFrontEnd, palette: ICommandPalette, launcher
     palette.addItem({ command, category });
 
     if (launcher) {
-        launcher.add({
-            command,
-            category,
-            kernelIconUrl: '/nni/icon.png'  // FIXME: this field only works for "Notebook" category
-        });
+        launcher.add({ command, category });
     }
 }