Icon not visible in Lumino widget title

JupyterLab
1

I am trying to add a Lumino widget to the ‘right’ panel of the Jupyter Lab UI. However, I am not able to set the icon in the title bar of the widget using font awesome icons. Here’s my code:

class ExampleWidget extends Widget {
      constructor() {
        super()
        this.id = 'myextension-widget'
        this.title.label = 'Sample'
        this.title.closable = true
        this.title.iconClass = 'face-smile'
        this.addClass('mypanel')
      }
    }

What am I missing here? Can someone please help?

2

After seeing this posted on Stackoverflow, I suggested maybe people here may have more insight.

1 Like
3

I fixed this problem by actually creating a new LabIcon object from an external SVG file and passing it to the this.title.icon property of the widget. The icon now shows up in the title but I am not able to adjust the size of the icon. Any suggestions on how to change the size of the icon?

1 Like
4

@Rakesh_K I wrote a solution on stackoverflow

1 Like
5

@djangoliv thank you for the solution. Now that I am able to set the icon correctly, is there a way that I can adjust the size of the icon?

6

Since you added a class “this.addClass(‘mypanel’)”, you should be able to achieve it with css.

.mypanel {
  width: 32px !important;
}
1 Like