How to add custom menu items and shapes in context menu which pops up on click of "Change Type" icon


I am able to add custom shapes in palette by referring to Nyan Cats example. Thanks for this sample code.

Now I am looking for customizing menu items which pops up on click of “Change Type” icon. I want to add new menu items and custom icons for the new menu items. Please suggest on how to achieve this.

Thanks in advance.



I am now able to add custom menu items on click of “Change Type” icon. For adding custom shapes to the menu items, i followed this post.

Steps followed are as below:

  1. Converted my custom icon to SVG format.
  2. Converted SVG image to font file from fontello.
  3. Copied the downloaded font files to bpmn-js assets directory.
  4. Loading the new font style during application start up.
  5. Made necessary changes in java script classes(ContextPadprovider, PaletteProvider.js)

Still, the custom image is not shown for the custom menu item. It is just showing a rectangle box(Please refer to “Custom Task 1” in the attached snapshot).

Please let me know if i am missing something.



Hi Ajith, Can you please elaborate what changes you made in contextpadprovider.js and paletteprovider.js files. Thanks !


how can I add the help icon for each module of change type ?


Please do not necrobump old topics. Instead link to this thread from new topic.