fixed check mark icons in CommandPaletteSvg

packages/application/src/frontend.ts

@@ -40,7 +40,7 @@ export abstract class JupyterFrontEnd<
    * Construct a new JupyterFrontEnd object.
    */
   constructor(options: JupyterFrontEnd.IOptions<T>) {
-    // render context menu with svg icon tweaks
+    // render context menu with inline svg icon tweaks
     options.contextMenuRenderer =
       options.contextMenuRenderer || MenuSvg.defaultRenderer;
 

packages/apputils-extension/src/palette.ts

@@ -10,7 +10,7 @@ import { CommandPalette } from '@lumino/widgets';
 
 import { ILayoutRestorer, JupyterFrontEnd } from '@jupyterlab/application';
 import { ICommandPalette, IPaletteItem } from '@jupyterlab/apputils';
-import { paletteIcon } from '@jupyterlab/ui-components';
+import { CommandPaletteSvg, paletteIcon } from '@jupyterlab/ui-components';
 
 /**
  * The command IDs used by the apputils extension.
@@ -141,7 +141,11 @@ namespace Private {
    */
   export function createPalette(app: JupyterFrontEnd): CommandPalette {
     if (!palette) {
-      palette = new CommandPalette({ commands: app.commands });
+      // use a renderer tweaked to use inline svg icons
+      palette = new CommandPalette({
+        commands: app.commands,
+        renderer: CommandPaletteSvg.defaultRenderer
+      });
       palette.id = 'command-palette';
       palette.title.icon = paletteIcon;
       palette.title.label = 'Commands';

packages/apputils/style/commandpalette.css

@@ -163,14 +163,8 @@
   color: var(--jp-ui-font-color3);
 }
 
-.lm-CommandPalette-item.lm-mod-toggled .lm-CommandPalette-itemIcon {
-  background-image: var(--jp-icon-check);
-  background-size: 16px;
-  background-repeat: no-repeat;
-}
-
 .lm-CommandPalette-item .lm-CommandPalette-itemIcon {
-  padding: 0px 0px 0px 4px;
+  margin: 0 4px 0 0;
   position: relative;
   width: 16px;
   top: 2px;

packages/mainmenu/src/labmenu.ts

@@ -63,7 +63,7 @@ export class JupyterLabMenu implements IJupyterLabMenu {
    *   groups that are added to the menu.
    */
   constructor(options: Menu.IOptions, includeSeparators: boolean = true) {
-    // render menu with svg icon tweaks
+    // render menu with inline svg icon tweaks
     this.menu = new MenuSvg(options);
     this._includeSeparators = includeSeparators;
   }
@@ -129,7 +129,7 @@ export class JupyterLabMenu implements IJupyterLabMenu {
   /**
    * The underlying Phosphor menu.
    */
-  readonly menu: MenuSvg;
+  readonly menu: Menu;
 
   /**
    * Whether the menu has been disposed.

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

@@ -0,0 +1,68 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { h, VirtualElement } from '@lumino/virtualdom';
+import { CommandPalette } from '@lumino/widgets';
+
+import { checkIcon } from './iconimports';
+import { iconStyle } from '../style';
+import { classes } from '../utils';
+
+// const submenuIcon = caretRightIcon.bindprops({
+//   justify: 'center',
+//   kind: 'menuItem'
+// });
+
+export namespace CommandPaletteSvg {
+  /**
+   * a modified implementation of the CommandPalette Renderer
+   */
+  export class Renderer extends CommandPalette.Renderer {
+    /**
+     * Render the icon for a command palette item.
+     *
+     * @param data - The data to use for rendering the icon.
+     *
+     * @returns A virtual element representing the icon.
+     */
+    renderItemIcon(data: CommandPalette.IItemRenderData): VirtualElement {
+      let className = this.createIconClass(data);
+
+      if (data.item.isToggled) {
+        // check mark icon takes precedence
+        return h.div({ className }, checkIcon, data.item.iconLabel);
+      }
+
+      /* <DEPRECATED> */
+      if (typeof data.item.icon === 'string') {
+        return h.div({ className }, data.item.iconLabel);
+      }
+      /* </DEPRECATED> */
+
+      // if data.item.icon is undefined, it will be ignored
+      return h.div({ className }, data.item.icon!, data.item.iconLabel);
+    }
+
+    /**
+     * Create the class name for the command item icon.
+     *
+     * @param data - The data to use for the class name.
+     *
+     * @returns The full class name for the item icon.
+     */
+    createIconClass(data: CommandPalette.IItemRenderData): string {
+      let name = 'lm-CommandPalette-itemIcon';
+      /* <DEPRECATED> */
+      name += ' p-CommandPalette-itemIcon';
+      /* </DEPRECATED> */
+
+      return classes(
+        iconStyle({ justify: 'center', kind: 'commandPaletteItem' }),
+        data.item.iconClass,
+        name
+      );
+    }
+  }
+
+  export const defaultRenderer = new Renderer();
+}

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

@@ -3,5 +3,7 @@
 
 export * from './iconimports';
 export * from './labicon';
+
+export * from './commandpalettesvg';
 export * from './menusvg';
 export * from './tabbarsvg';

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

@@ -43,7 +43,7 @@ export class MenuSvg extends Menu {
    */
   insertItem(index: number, options: Menu.IItemOptions): Menu.IItem {
     if (options.submenu?.renderer === Menu.defaultRenderer) {
-      //
+      // create a "view" of the submenu with a different default renderer
       const submenu = Object.create(options.submenu, {
         renderer: {
           configurable: true,

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

@@ -17,6 +17,7 @@ import { NestedCSSProperties } from 'typestyle/lib/types';
  */
 export type IconKindType =
   | 'breadCrumb'
+  | 'commandPaletteItem'
   | 'launcherCard'
   | 'launcherSection'
   | 'listing'
@@ -58,6 +59,11 @@ const iconCSSBreadCrumb: NestedCSSProperties = {
   verticalAlign: 'middle'
 };
 
+const iconCSSCommandPaletteItem: NestedCSSProperties = {
+  height: '16px',
+  width: '16px'
+};
+
 const iconCSSLauncherCard: NestedCSSProperties = {
   height: '52px',
   width: '52px'
@@ -136,6 +142,7 @@ const iconCSSToolbarButton: NestedCSSProperties = {
 
 const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   breadCrumb: iconCSSBreadCrumb,
+  commandPaletteItem: iconCSSCommandPaletteItem,
   launcherCard: iconCSSLauncherCard,
   launcherSection: iconCSSLauncherSection,
   listing: iconCSSListing,
@@ -276,6 +283,7 @@ const containerCSSToolbarButton: NestedCSSProperties = {
 
 const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   breadCrumb: containerCSSBreadCrumb,
+  commandPaletteItem: {},
   launcherCard: containerCSSLauncherCard,
   launcherSection: containerCSSLauncherSection,
   listing: containerCSSListing,