JL 4: Toolbar Button with icon and text

I am trying to create a button for the toolbar that has both an icon and text.

Just like the download button:

Here is the code I am trying. All I get is the upload icon and the mouseover caption with no text to side.

import { JupyterFrontEndPlugin, JupyterFrontEnd } from '@jupyterlab/application';
import { INotebookTracker } from '@jupyterlab/notebook';
import { fileUploadIcon } from '@jupyterlab/ui-components';


 commands.addCommand(command, {
        label: "Submit for Grading",
        icon: fileUploadIcon,
        iconClass: "jp-icon3",
        iconLabel: "Submit for Grading",
      caption: 'Send your notebook to be graded',
      execute: (args: any) => {
        var nb = nbpanel?.context.model.toJSON();

        var payload = JSON.stringify({'nb': nb});
        var otherParam = {
          headers: {"Content-Type": "application/json"},
          body: payload,
          method: "POST"


@Sean_Morris following this example: https://github.com/jupyterlab/extension-examples/tree/main/toolbar-button

With this followng snippet for the plugin:

import {
} from '@jupyterlab/application';

import { downloadIcon } from '@jupyterlab/ui-components';

 * Initialization data for the myextension extension.
const plugin: JupyterFrontEndPlugin<void> = {
  id: 'myextension:plugin',
  description: 'A JupyterLab extension.',
  autoStart: true,
  activate: (app: JupyterFrontEnd) => {
    const { commands } = app;
    commands.addCommand('assignments:submit', {
      label: 'Submit for Grading',
      iconLabel: 'Submit for Grading',
      icon: downloadIcon,
      execute: () => {
        console.log('Hello World!');

export default plugin;

And the following for the setting file (schema/plugin.json):

  "jupyter.lab.toolbars": {
    "Notebook": [
        "name": "submit-grading",
        "icon": "ui-components:download",
        "label": "Submit for Grading",
        "command": "assignments:submit"
  "title": "@jupyterlab-examples/toolbar-button",
  "description": "@jupyterlab-examples/toolbar-button settings.",
  "type": "object",
  "properties": {},
  "additionalProperties": false

Will display the toolbar item with both the label and the icon:


Specifying label in schema/plugin.json seems to be required for both to be displayed. Not sure why, but maybe it’s an issue in JupyterLab. It could also be an issue if we want the label to be properly localized.

1 Like

Thanks @jtp – The plugin.json was the problem. Where did you find the resources to figure this out? The toolbar example doesn’t have the icon and label in the plugin.json needed to make something like the Download Button.

Good deal, I am psyched. Thanks

There is a bit of information on what can be customized via the settings in the JupyterLab docs: Common Extension Points — JupyterLab 4.0.2 documentation