Example for Icon parameter for Application Launcher

[berglh]

Hi there,

Great plugin. I spent quite a bit of time trying to figure out the icon option for a custom application launcher.

I saw in other example for extensions that you could supply an SVG string and started with that at first. Took me a while, but eventually providing a path to an SVG baked into my JupyterLab image ended up working.

Might be useful to provide an example for this in the documentation - I couldn't find it if it is actually there. I ended up grabbing the terminal SVG using Chrome debugger and saved it as an SVG and included it in my application launcher example.

Anyway, my goal was to launch a Jupyter tab to proxy through to the Spark application UI running in the Jupyter Lab container (by using a proxy plugin to expose the port via a URL). This plugin worked amazingly.

Another thing is that switching between dark and light modes affects the highlighting of the icon background for the terminal icon; i.e. the colours get inverted by some object property in the SVG. Might be useful to describe this behaviour also with the SVG icons example. I'm still figuring out how to make my Spark UI icon work correctly in both modes.

Cheers,
Berg

[bkanuka]

FWIW I'm personally having problems setting an icon. I would also appreciate a working example 😉

[bkanuka]

The path you should place your SVG icon is /usr/local/share/jupyter/jupyter_app_launcher/your_icon.svg.

---

For those who use Zero to JupyterHub, you can add an icon (or any file) to JupyterLab instances by using the singleuser.extraFiles config parameter, and providing the SVG as a base64 encoded string. https://z2jh.jupyter.org/en/stable/resources/reference.html#singleuser-extrafiles

[luanabeckerdaluz]

Hi there,

I also spent a bit of time to figure out that the icon option needed to be an svg file. I tried to set a png file as icon and just could set an icon after find this issue. A suggestion would be to add this information in usage.rst file.

Also, I could not set a remote svg file, just a local one. I placed my jp_app_launcher.yaml file on the same directory I run jupyterlab. Here is the content of my file.
NOTE1: The file icon4.svg is any svg file. This approach works perfectly
NOTE2: The second icon set from an URL is not working

- title: Website1
  description: Example of opening a URL in a tab
  source: https://data.inpe.br/bdc/explorer/explore
  type: url
  icon: ./icon4.svg
  catalog: Cat1
  args:
    sandbox:
      [
        'allow-same-origin',
        'allow-scripts',
        'allow-downloads',
        'allow-modals',
        'allow-popups'
      ]

- title: Website2
  description: Example of opening a URL in a tab
  source: https://github.com/trungleduc/jupyter_app_launcher/
  type: url
  icon: http://www.svgrepo.com/show/122770/user-online.svg
  catalog: Cat1
  args:
    sandbox:
      [
        'allow-same-origin',
        'allow-scripts',
        'allow-downloads',
        'allow-modals',
        'allow-popups'
      ]

[trungleduc]

Thank @luanabeckerdaluz for your info. A PR updating the documentation is very welcome!

[MiXaiLL76]

https://github.com/trungleduc/jupyter_app_launcher/tree/main/samples/code-server#setting-up-jupyter_app_launcher-with-open-in-new-tab

icon example