Styling the customized context menu in Forge viewer

Question

I'm looking for a way to separate custom created context menu visually (like background color etc.) from the default menu options like (Show properties, Isolate, etc.)

I've seen this example:

menu.push({
        title: 'Show details',
        className: 'fa fa-share',
        target: [{
          title: 'Hub details',
          className: 'fa fa-cloud',
          target: () => {
            this.emit('context.details', {
              event, node, type: 'hubs'
            })
          }
        }]
      }) 

but it seems className key doesn't work here. Is there a way to style context menu ?

Answer 1

The class name for your custom icon must be set to a property called icon, not className. Running the following code snippet works as expected:

NOP_VIEWER.registerContextMenuCallback('test', (menu, status) => {
    menu.push({
        title: 'Test',
        icon: 'adsk-icon-first-person',
        target: () => { console.log('It works!'); }
    });
});