Use custom icon on launcher item

[felipebmendes]

Hey folks,

I’m developing this extension for JupyterLab and I would like to add a custom SVG icon to a launcher item that I’ve created. This icon is placed on my style folder but it isn’t being displayed in the launcher item.

This is where the SVG is placed on my project directory:

This is what I’ve done:

   const url = PageConfig.getBaseUrl() + 'proxy/';

    const launcher_item : ILauncher.IItemOptions = {
        command: command,
        args: {
          url: url,
          newBrowserTab: true,
          title: 'Running Server',
          id: 'server-launcher'
        },
        category: 'Notebook'
    };
  
    launcher_item.kernelIconUrl =  '../style/icons/server.svg'
    
    launcher.add(launcher_item);

And this is how it’s shown in the UI:

I’ve also tried to create an icon using the ui-components package and set it in the command being used in my launcher item but that didn’t work either.

const serverIcon = new LabIcon({ name: 'ui-components:server-proxy', svgstr: '../style/icons/server.svg' });

Could someone please help me with this?

Thanks in advance.

[bollwyvl]

Yeah, kernels are needfully special, as they serve up pngs from the backend, rather than a LabIcon.

The svgStr of a LabIcon needs to be an actual SVG. You’ll want to

• (optionally) make a typing override
• prepare your SVG
  • make sure it’s well formed (proper XML declarations, etc)
    • get rid of all id attributes
    • clean up all the cruft you can
    • inkscape is good for this, with it’s Optimized SVG export format
    • svgo can be useful if you have a ton of icons, but does have some binary dependencies that can be… exciting…
  • add class hints, so that it looks good on light and dark backgrounds
    • the docs are good
• import your SVG
• make your icon
• use it in a command

and i think you have the rest!

[felipebmendes]

Hey @bollwyvl,

Following your instructions for creating the LabIcon from the SVG and changing the launcher item to the category “Other” did the trick.

Here is the result:

Thanks a lot.

[timkpaine]

Note that you can use a custom (non-svg) image as well:
here is an example:

jpmorganchase/jupyterlab_templates/blob/5d0526582b17be4ecd63bde9d95dc1946fb90168/js/src/index.ts#L175

Code:

kernelIconUrl: "data:image/png;base64,..