Icon not visible in Lumino widget title

Question

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?

Answer 1

You need to:

• had the 'fa' class
• fix the font class name ('fa-smile-o' instead of 'face-smile')

This example works for me:

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