# Change file browser icons and style

**URL:** <https://discourse.jupyter.org/t/change-file-browser-icons-and-style/13681>\
**Category:** JupyterLab\
**Created:** [March 31, 2022, 7:12pm UTC](https://discourse.jupyter.org/t/change-file-browser-icons-and-style/13681 "2022-03-31T19:12:20Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Juan\_Manuel\_Ortiz\_de](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/juan_manuel_ortiz_de/32/6843_2.png) [@Juan\_Manuel\_Ortiz\_de](https://discourse.jupyter.org/u/Juan_Manuel_Ortiz_de)\
**Post date:** [March 31, 2022, 7:12pm UTC](https://discourse.jupyter.org/t/change-file-browser-icons-and-style/13681/1 "2022-03-31T19:12:20Z")

</div>

Hi!

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

 ![Screenshot of JupyterLab (2)](https://canada1.discourse-cdn.com/flex031/uploads/jupyter/original/2X/f/fa03b78f4517b9d69bf8ad3a5a08bc1cf02f1563.jpeg)

Thanks!

---

<div class="post-metadata">

**Author:** ![bollwyvl](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/bollwyvl/32/904_2.png) [@bollwyvl](https://discourse.jupyter.org/u/bollwyvl)\
**Post date:** [March 31, 2022, 8:55pm UTC](https://discourse.jupyter.org/t/change-file-browser-icons-and-style/13681/2 "2022-03-31T20:55:41Z")

</div>

The core icons are defined in [iconimports.ts](https://github.com/jupyterlab/jupyterlab/blob/82df0b635dae2c1a70a7c41fe7ee7af1c1caefb2/packages/ui-components/src/icon/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](https://github.com/jupyterlab/jupyterlab/blob/82df0b635dae2c1a70a7c41fe7ee7af1c1caefb2/packages/docregistry/src/registry.ts#L584).

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](https://github.com/gt-coar/jupyterlab-gt-coar-theme/blob/ca6b8eb1d92c8532e578f7f5ed6609b8430425e5/packages/brand/src/util.ts#L51), which basically works the same way. It also defines some [colors](https://github.com/gt-coar/jupyterlab-gt-coar-theme/blob/ca6b8eb1d92c8532e578f7f5ed6609b8430425e5/packages/dark/style/variables.css).

---

<div class="post-metadata">

**Author:** ![Juan\_Manuel\_Ortiz\_de](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/juan_manuel_ortiz_de/32/6843_2.png) [@Juan\_Manuel\_Ortiz\_de](https://discourse.jupyter.org/u/Juan_Manuel_Ortiz_de)\
**Post date:** [April 4, 2022, 8:59pm UTC](https://discourse.jupyter.org/t/change-file-browser-icons-and-style/13681/3 "2022-04-04T20:59:09Z")

</div>

I could resolve it!  
Thank you very much!

---

<div class="post-metadata">

**Author:** ![Juan\_Manuel\_Ortiz\_de](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/juan_manuel_ortiz_de/32/6843_2.png) [@Juan\_Manuel\_Ortiz\_de](https://discourse.jupyter.org/u/Juan_Manuel_Ortiz_de)\
**Post date:** [April 5, 2022, 10:46pm UTC](https://discourse.jupyter.org/t/change-file-browser-icons-and-style/13681/4 "2022-04-05T22:46:57Z")

</div>

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](https://canada1.discourse-cdn.com/flex031/uploads/jupyter/original/2X/9/9827883f4ec1a1e1bbbcb143f1b2663cc0010353.jpeg)

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

```auto

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?

---

<div class="post-metadata">

**Author:** ![bollwyvl](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/bollwyvl/32/904_2.png) [@bollwyvl](https://discourse.jupyter.org/u/bollwyvl)\
**Post date:** [April 5, 2022, 11:02pm UTC](https://discourse.jupyter.org/t/change-file-browser-icons-and-style/13681/5 "2022-04-05T23:02:52Z")

</div>

That [appears](https://github.com/jupyterlab/jupyterlab/blob/a7ef139ee50ad598a231e90b76a0959b3b4b692d/packages/filebrowser/src/crumbs.ts#L15) to just be `folderIcon`, and should work by e.g.

```auto
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.

---

<div class="post-metadata">

**Author:** ![Juan\_Manuel\_Ortiz\_de](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/juan_manuel_ortiz_de/32/6843_2.png) [@Juan\_Manuel\_Ortiz\_de](https://discourse.jupyter.org/u/Juan_Manuel_Ortiz_de)\
**Post date:** [April 6, 2022, 5:43pm UTC](https://discourse.jupyter.org/t/change-file-browser-icons-and-style/13681/6 "2022-04-06T17:43:04Z")

</div>

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](https://canada1.discourse-cdn.com/flex031/uploads/jupyter/original/2X/9/9827883f4ec1a1e1bbbcb143f1b2663cc0010353.jpeg)

Could it be an error that I should report?

---

<div class="post-metadata">

**Author:** ![bollwyvl](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/bollwyvl/32/904_2.png) [@bollwyvl](https://discourse.jupyter.org/u/bollwyvl)\
**Post date:** [April 6, 2022, 7:02pm UTC](https://discourse.jupyter.org/t/change-file-browser-icons-and-style/13681/7 "2022-04-06T19:02:15Z")

</div>

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.