Migrate to LabIcon

src/breakpoints/index.ts

@@ -11,6 +11,8 @@ import { BreakpointsBody } from './body';
 
 import { BreakpointsHeader } from './header';
 
+import { closeAllIcon } from '../icons';
+
 import { BreakpointsModel } from './model';
 
 /**
@@ -31,7 +33,7 @@ export class Breakpoints extends Panel {
     header.toolbar.addItem(
       'closeAll',
       new ToolbarButton({
-        iconClass: 'jp-CloseAllIcon',
+        icon: closeAllIcon,
         onClick: () => {
           void service.clearBreakpoints();
         },

src/handlers/tracker.ts

@@ -26,6 +26,8 @@ import { IEditorTracker } from '@jupyterlab/fileeditor';
 
 import { INotebookTracker } from '@jupyterlab/notebook';
 
+import { textEditorIcon } from '@jupyterlab/ui-components';
+
 import { chain, each } from '@lumino/algorithm';
 
 import { Token } from '@lumino/coreutils';
@@ -171,7 +173,7 @@ export class TrackerHandler implements IDisposable {
     widget.title.label = PathExt.basename(path);
     widget.title.closable = true;
     widget.title.caption = path;
-    widget.title.iconClass = 'jp-MaterialIcon jp-TextEditorIcon';
+    widget.title.icon = textEditorIcon;
     widget.disposed.connect(() => editorHandler.dispose());
     this._shell.add(widget, 'main');
     void this._readOnlyEditorTracker.add(widget);

src/icons.ts

@@ -0,0 +1,40 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+
+import closeAllSvgStr from '../style/icons/close-all.svg';
+import stepIntoSvgStr from '../style/icons/step-into.svg';
+import stepOutSvgStr from '../style/icons/step-out.svg';
+import stepOverSvgStr from '../style/icons/step-over.svg';
+import variableSvgStr from '../style/icons/variable.svg';
+import viewBreakpointSvgStr from '../style/icons/view-breakpoint.svg';
+
+export { runIcon, stopIcon } from '@jupyterlab/ui-components';
+
+export const closeAllIcon = new LabIcon({
+  name: 'debugger:close-all',
+  svgstr: closeAllSvgStr
+});
+
+export const stepIntoIcon = new LabIcon({
+  name: 'debugger:step-into',
+  svgstr: stepIntoSvgStr
+});
+
+export const stepOverIcon = new LabIcon({
+  name: 'debugger:step-over',
+  svgstr: stepOverSvgStr
+});
+
+export const stepOutIcon = new LabIcon({
+  name: 'debugger:step-out',
+  svgstr: stepOutSvgStr
+});
+
+export const variableIcon = new LabIcon({
+  name: 'debugger:variable',
+  svgstr: variableSvgStr
+});
+
+export const viewBreakpointIcon = new LabIcon({
+  name: 'debugger:view-breakpoint',
+  svgstr: viewBreakpointSvgStr
+});

src/index.ts

@@ -26,7 +26,13 @@ import { INotebookTracker, NotebookPanel } from '@jupyterlab/notebook';
 
 import { Session } from '@jupyterlab/services';
 
-import { runIcon, stopIcon } from '@jupyterlab/ui-components';
+import {
+  runIcon,
+  stepIntoIcon,
+  stepOutIcon,
+  stepOverIcon,
+  stopIcon
+} from './icons';
 
 import { Debugger } from './debugger';
 
@@ -359,7 +365,7 @@ const main: JupyterFrontEndPlugin<IDebugger> = {
     commands.addCommand(CommandIDs.next, {
       label: 'Next',
       caption: 'Next',
-      iconClass: 'jp-MaterialIcon jp-StepOverIcon',
+      icon: stepOverIcon,
       isEnabled: () => {
         return service.hasStoppedThreads();
       },
@@ -371,7 +377,7 @@ const main: JupyterFrontEndPlugin<IDebugger> = {
     commands.addCommand(CommandIDs.stepIn, {
       label: 'StepIn',
       caption: 'Step In',
-      iconClass: 'jp-MaterialIcon jp-StepInIcon',
+      icon: stepIntoIcon,
       isEnabled: () => {
         return service.hasStoppedThreads();
       },
@@ -383,7 +389,7 @@ const main: JupyterFrontEndPlugin<IDebugger> = {
     commands.addCommand(CommandIDs.stepOut, {
       label: 'StepOut',
       caption: 'Step Out',
-      iconClass: 'jp-MaterialIcon jp-StepOutIcon',
+      icon: stepOutIcon,
       isEnabled: () => {
         return service.hasStoppedThreads();
       },

src/sources/index.ts

@@ -15,6 +15,8 @@ import { SourcesBody } from './body';
 
 import { SourcesHeader } from './header';
 
+import { viewBreakpointIcon } from '../icons';
+
 import { SourcesModel } from './model';
 
 /**
@@ -38,7 +40,7 @@ export class Sources extends Panel {
     header.toolbar.addItem(
       'open',
       new ToolbarButton({
-        iconClass: 'jp-ViewBreakpointIcon',
+        icon: viewBreakpointIcon,
         onClick: () => model.open(),
         tooltip: 'Open in the Main Area'
       })

src/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}

src/variables/table.tsx

@@ -1,20 +1,22 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+import { ReactWidget } from '@jupyterlab/apputils';
+
 import { ArrayExt } from '@lumino/algorithm';
 
-import { ReactWidget } from '@jupyterlab/apputils';
+import { CommandRegistry } from '@lumino/commands';
 
 import React, { useEffect, useState } from 'react';
 
+import { variableIcon } from '../icons';
+
 import { VariablesModel } from './model';
 
 import { IDebugger } from '../tokens';
 
 import { CommandIDs } from '..';
 
-import { CommandRegistry } from '@lumino/commands';
-
 /**
  * The body for a table of variables.
  */
@@ -78,7 +80,7 @@ export class VariableDetails extends ReactWidget {
     super();
     const { details, commands, model, service, title } = options;
 
-    this.title.iconClass = 'jp-VariableIcon';
+    this.title.icon = variableIcon;
     this.title.label = `${service.session?.connection?.name} - details of ${title}`;
 
     this._variables = details;

style/icons.css

@@ -3,90 +3,6 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-[data-jp-theme-light='true'] {
-  --jp-debugger-deactivate: url('./icons/md-light/baseline-label_off-24px.svg');
-}
-
-[data-jp-theme-light='false'] {
-  --jp-debugger-deactivate: url('./icons/md-dark/baseline-label_off-24px.svg');
-}
-
-.jp-DebuggerDeactivateIcon {
-  background-image: url('icons/activate-breakpoints.svg');
-}
-
-[data-jp-theme-light='false'] .jp-DebuggerDeactivateIcon {
-  background-image: url('icons/md-dark/activate-breakpoints.svg');
-}
-
-.expand-toggle-collapsed {
-  display: inline-block;
-  vertical-align: middle;
-  height: 16px;
-  width: 16px;
-  background: url('icons/arrow-collapse.svg') center center no-repeat;
-}
-
-.expand-toggle-expanded {
-  display: inline-block;
-  vertical-align: middle;
-  height: 16px;
-  width: 16px;
-  background: url('icons/arrow-expand.svg') center center no-repeat;
-}
-
-.jp-StepOverIcon {
-  background-image: url('icons/step-over.svg');
-}
-
-[data-jp-theme-light='false'] .jp-StepOverIcon {
-  background-image: url('icons/md-dark/step-over.svg');
-}
-
-.jp-StepInIcon {
-  background-image: url('icons/step-into.svg');
-}
-
-[data-jp-theme-light='false'] .jp-StepInIcon {
-  background-image: url('icons/md-dark/step-into.svg');
-}
-
-.jp-StepOutIcon {
-  background-image: url('icons/step-out.svg');
-}
-
-[data-jp-theme-light='false'] .jp-StepOutIcon {
-  background-image: url('icons/md-dark/step-out.svg');
-}
-
-.jp-ClassIcon {
-  background-image: url('icons/class.svg');
-}
-
-.jp-ClassMemberIcon {
-  background-image: url('icons/enumerator.svg');
-}
-
-.jp-VariableIcon {
-  background-image: url('icons/variable.svg');
-}
-
-.jp-CloseAllIcon {
-  background-image: url('icons/close-all.svg');
-}
-
-[data-jp-theme-light='false'] .jp-CloseAllIcon {
-  background-image: url('icons/md-dark/close-all.svg');
-}
-
-.jp-ViewBreakpointIcon {
-  background-image: url('icons/view-breakpoint.svg');
-}
-
-[data-jp-theme-light='false'] .jp-ViewBreakpointIcon {
-  background-image: url('icons/md-dark/view-breakpoint.svg');
-}
-
 .jp-DebuggerSwitchButton::before {
   content: '';
   width: 14px;

style/icons/close-all.svg

@@ -1,7 +1,7 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
   <g class="jp-icon3" fill="#616161">
     <path d="M16.4805 17.2481C16.8158 16.3972 17 15.4701 17 14.5C17 10.3579 13.6421 7.00001 9.5 7.00001C8.36314 7.00001 7.28536 7.25295 6.31986 7.70564C7.60064 6.0592 9.60074 5 11.8482 5C15.7142 5 18.8482 8.13401 18.8482 12C18.8482 14.0897 17.9325 15.9655 16.4805 17.2481Z" />
     <path d="M19.1607 14.2481C19.496 13.3971 19.6801 12.4701 19.6801 11.5C19.6801 7.35786 16.3223 4 12.1801 4C11.0433 4 9.9655 4.25295 9.00001 4.70563C10.2808 3.05919 12.2809 2 14.5284 2C18.3944 2 21.5284 5.134 21.5284 9C21.5284 11.0897 20.6127 12.9655 19.1607 14.2481Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M16 15C16 18.866 12.866 22 9 22C5.13401 22 2 18.866 2 15C2 11.134 5.13401 8 9 8C12.866 8 16 11.134 16 15ZM11.7914 11L13 12.2086L10.2086 15L13 17.7914L11.7914 19L9 16.2086L6.20857 19L5 17.7914L7.79143 15L5 12.2086L6.20857 11L9 13.7914L11.7914 11Z" />
+    <path d="M16 15C16 18.866 12.866 22 9 22C5.13401 22 2 18.866 2 15C2 11.134 5.13401 8 9 8C12.866 8 16 11.134 16 15ZM11.7914 11L13 12.2086L10.2086 15L13 17.7914L11.7914 19L9 16.2086L6.20857 19L5 17.7914L7.79143 15L5 12.2086L6.20857 11L9 13.7914L11.7914 11Z" />
     </g>
 </svg>

style/icons/step-into.svg

@@ -1,3 +1,5 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99998 9.53198H8.54198L12.447 5.62698L11.386 4.56698L8.74898 7.17698L8.74898 0.999985H7.99998H7.25098L7.25098 7.17698L4.61398 4.56698L3.55298 5.62698L7.45798 9.53198H7.99998ZM9.95598 13.013C9.95598 14.1175 9.06055 15.013 7.95598 15.013C6.85141 15.013 5.95598 14.1175 5.95598 13.013C5.95598 11.9084 6.85141 11.013 7.95598 11.013C9.06055 11.013 9.95598 11.9084 9.95598 13.013Z" fill="#616161"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<g class="jp-icon3" fill="#616161">
+		<path d="M7.99998 9.53198H8.54198L12.447 5.62698L11.386 4.56698L8.74898 7.17698L8.74898 0.999985H7.99998H7.25098L7.25098 7.17698L4.61398 4.56698L3.55298 5.62698L7.45798 9.53198H7.99998ZM9.95598 13.013C9.95598 14.1175 9.06055 15.013 7.95598 15.013C6.85141 15.013 5.95598 14.1175 5.95598 13.013C5.95598 11.9084 6.85141 11.013 7.95598 11.013C9.06055 11.013 9.95598 11.9084 9.95598 13.013Z"/>
+	</g>
 </svg>

style/icons/step-out.svg

@@ -1,3 +1,5 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99998 1H7.45798L3.55298 4.905L4.61398 5.965L7.25098 3.355V9.532H7.99998H8.74898V3.355L11.386 5.965L12.447 4.905L8.54198 1H7.99998ZM9.95598 13.013C9.95598 14.1176 9.06055 15.013 7.95598 15.013C6.85141 15.013 5.95598 14.1176 5.95598 13.013C5.95598 11.9084 6.85141 11.013 7.95598 11.013C9.06055 11.013 9.95598 11.9084 9.95598 13.013Z" fill="#616161"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<g class="jp-icon3" fill="#616161">
+		<path d="M7.99998 1H7.45798L3.55298 4.905L4.61398 5.965L7.25098 3.355V9.532H7.99998H8.74898V3.355L11.386 5.965L12.447 4.905L8.54198 1H7.99998ZM9.95598 13.013C9.95598 14.1176 9.06055 15.013 7.95598 15.013C6.85141 15.013 5.95598 14.1176 5.95598 13.013C5.95598 11.9084 6.85141 11.013 7.95598 11.013C9.06055 11.013 9.95598 11.9084 9.95598 13.013Z"/>
+	</g>
 </svg>

style/icons/step-over.svg

@@ -1,3 +1,5 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.25 5.75V1.75H12.75V4.2916C11.605 2.93303 9.83899 2.08334 7.90914 2.08334C4.73316 2.08334 1.98941 4.39036 1.75072 7.48075L1.72992 7.75H3.231L3.25287 7.5241C3.46541 5.32932 5.45509 3.58334 7.90914 3.58334C9.6452 3.58334 11.1528 4.45925 11.9587 5.75H9.12986V7.25H13.292L14.2535 6.27493V5.75H14.25ZM7.99997 14C9.10454 14 9.99997 13.1046 9.99997 12C9.99997 10.8954 9.10454 10 7.99997 10C6.8954 10 5.99997 10.8954 5.99997 12C5.99997 13.1046 6.8954 14 7.99997 14Z" fill="#616161"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<g class="jp-icon3" fill="#616161">
+		<path d="M14.25 5.75V1.75H12.75V4.2916C11.605 2.93303 9.83899 2.08334 7.90914 2.08334C4.73316 2.08334 1.98941 4.39036 1.75072 7.48075L1.72992 7.75H3.231L3.25287 7.5241C3.46541 5.32932 5.45509 3.58334 7.90914 3.58334C9.6452 3.58334 11.1528 4.45925 11.9587 5.75H9.12986V7.25H13.292L14.2535 6.27493V5.75H14.25ZM7.99997 14C9.10454 14 9.99997 13.1046 9.99997 12C9.99997 10.8954 9.10454 10 7.99997 10C6.8954 10 5.99997 10.8954 5.99997 12C5.99997 13.1046 6.8954 14 7.99997 14Z"/>
+	</g>
 </svg>

style/icons/view-breakpoint.svg

@@ -1,6 +1,6 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <g class="jp-icon3" fill="#616161">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M5 2H15L20 7V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V14H4V16L8 13L4 10V12H3V4C3 3.46957 3.21071 2.96086 3.58579 2.58579C3.96086 2.21071 4.46957 2 5 2ZM12 18H16V16H12V18ZM12 14H18V12H12V14ZM12 10H18V8H12V10ZM10 14C10.5523 14 11 13.5523 11 13C11 12.4477 10.5523 12 10 12C9.44771 12 9 12.4477 9 13C9 13.5523 9.44771 14 10 14Z"/>
+        <path d="M5 2H15L20 7V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V14H4V16L8 13L4 10V12H3V4C3 3.46957 3.21071 2.96086 3.58579 2.58579C3.96086 2.21071 4.46957 2 5 2ZM12 18H16V16H12V18ZM12 14H18V12H12V14ZM12 10H18V8H12V10ZM10 14C10.5523 14 11 13.5523 11 13C11 12.4477 10.5523 12 10 12C9.44771 12 9 12.4477 9 13C9 13.5523 9.44771 14 10 14Z"/>
         <path d="M3 12V14H1V13V12H3Z"/>
     </g>
 </svg>