Change file browser icons and style

JupyterLab
1

Hi!

How can I change the icons of the file browser and sidebar on a jupyterlab extension?

Screenshot of JupyterLab (2)
Screenshot of JupyterLab (2)1855Ă—984 121 KB

Thanks!

2

The core icons are defined in iconimports.ts and importable from the top level of @jupyterlab/ui-components.

They make use of a set of classes, e.g. jp-icon0 and jp-icon-selectable to minimize the amount of rework needed when changing between light- and dark-valued themes, and are mapped to underlying theme colors.

File types can be extended by third-party extensions. To get access to them, you could iterate through DocumentRegistry.fileTypes.

To change any icon’s content, you’d need to provide a string of SVG to their svgstr property.

Here is an example of the theme overloading the favicon, which basically works the same way. It also defines some colors.

3 Likes
3

I could resolve it!
Thank you very much!

4

I only have one problem. I am able to change the Icons but the folder icons are not working in some specific cases. For example this one:
Screenshot of JupyterLab

I have modified the default icons as is shown in the example you share with me:


var doc = app.docRegistry


    //the rest of the icons
    var itFileTypes = doc.fileTypes()
    var fileIcon = itFileTypes.next()
    
    while (fileIcon != undefined) {

      switch (fileIcon.name){
        case 'directory':
          var Icon = fileIcon.icon as LabIcon
          Icon.svgstr = FOLDER_SVG
          break
        case 'notebook':
          var Icon = fileIcon.icon as LabIcon
          Icon.svgstr = NOTEBOOK_SVG
          break
      }

Should I modify that icon in another way?

5

That appears to just be folderIcon, and should work by e.g.

import {folderIcon} from '@jupyterlab/ui-components';
folderIcon.svgstr = `<svg>whatever</svg>`;

but…

Should I

that’s all up to you! as I said: trying to replace all the icons is kind of a losing game, as other extensions can add more.

6

I have applied your code but it results in the same output. It changes all the folder icons except the one shown in this image:
Screenshot of JupyterLab

Could it be an error that I should report?

7

It may be a race condition. You could try making a simpler plugin just for overloading the built-ins and a separate one that works on the files.

Or, you could try to get access to IFileBrowserFactory.defaultBrowser and change that.

If it really bothers you, you could create your own IFileBrowserFactory that overloaded the classes the way you want.

Anyhow: this is kinda off-label usage, and I wouldn’t bother with a bug report: when the decision was made to abandon the IconRegistry, it was known this was an issue, and i don’t foresee anyone wanting to change this particular API again.

1 Like