Add an Icon to a Custom Context Menu Item

Using a custom CSS class, you can implement a custom icon to a custom menu item.

First, we will start with the custom CSS class. A sample icon of a dialogue bubble is used in this case. We can add this to the styles.css:

.custom-icon {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAQCAQAAABnqj2yAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwABEJAAARCQAYms0rgAAAAHdElNRQfmCx4GAToQRdfDAAAAvklEQVQY053QoUtDcRwE8M/X/Z7tIdM2EA37C/xht4r4B9gMNpt/gWC32W3LBkFYMQvDsmIbliXBomGM9wyOx95c8q7dccdxkUsn9tWWESYek2unPqxix2HkiUvPNlpG5chdMjf29Sc1Nk8IRi09E1aKWviflZr2NalCuUYvFZGfbHr1buDMnho1Dsw6vRe7+o4VLlS2dHVte3MT+bf21rl7V0t/LBZWhpKhqiE6Uz34NPPgm5HpgtFMD3X7sB+iNjBkWLM8dwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0xMS0zMFQwNjowMTozNyswMDowMMfcwmYAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMTEtMzBUMDY6MDE6MzcrMDA6MDC2gXraAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==");
  background-repeat: no-repeat;
}

When we create the custom menu item in our SpreadJS application, we will also include the iconClass property and reference the custom CSS class we made:

// custom menu item
let menuItem = {
    text: 'Demo option',
    name: 'demoText',
    workArea: 'viewport',
    iconClass: 'custom-icon'
}

// adds custom option to context menu
spread.contextMenu.menuData.push(menuItem);

We then get the resulting "Demo option" menu item with our custom icon present:

You can view a working sample here. For more information regarding menu items, check out our demo category: /spreadjs/demos/features/worksheet/context-menu/basic-context-menu/purejs