How to Add a Custom PNG Icon to BPMN Elements in JointJS+?

[BhanuT97]

Introduction

I’m working with BPMN elements in JointJS+ and would like to add a custom icon (from a PNG file) to a BPMN activity element.

Currently, the activity element renders with the default style, but the goal is to display it with a custom icon overlaid inside the element.

Attached image shows:

Note: I cannot use a path with a baseRef or a public URL for the image source, since the application runs inside a WinForms WebView environment.

What’s the recommended way to achieve this in JointJS+?

Steps to reproduce

1. Render a basic BPMN diagram using the JSON below.
2. The element displays only the default label "Activity".
3. Goal: Add a custom PNG icon inside the BPMN Activity element.

{
  "type": "bpmn",
  "cells": [
    {
      "type": "bpmn2.Activity",
      "size": { "width": 120, "height": 100 },
      "position": { "x": 285, "y": 455 },
      "angle": 0,
      "id": "4a0eeb04-fec3-458a-91a1-1c1903cd7347",
      "z": 1,
      "attrs": {
        "border": { "borderType": "thick" }
      }
    }
  ]
}


### Restrictions & Constraints

_No response_

### Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

How to define and use a custom icon with the active shape is shown in our docs.

// define myIcon
shapes.bpmn2.Activity.ACTIVITY_TYPE_ICONS['myIcon'] = 'pathToImage'; // or data URI

// later on in the code
activity.attr('icon/iconType', 'myIcon');

[BhanuT97]

I tried this approach by setting the path of the icon file located in the public/assets folder, but in the browser’s Inspect Element, the output looks like this::

<image joint-selector="icon" id="v-281" x="5" y="0" width="30" height="30" 
       xlink:href="data:image/svg+xml,%2Fassets%2FWorkflow_16.png" 
       data-icon-type="workflowSubprocess">
</image>

Code used:

shapes.bpmn2.Activity.ACTIVITY_TYPE_ICONS['workflowSubprocess'] = process.env.PUBLIC_URL + '/assets/Workflow_16.png';

Below is the output:

[kumilingus]

That seems to be a bug. The data URL prefix is added even if you provide a path to icon. We need to fix it on our side. Here's a workaround:

shapes.bpmn2.Activity.attributes['icon-type'] = {
    set: function(type, _refBBox, _node, attrs) {
        let xlinkHref;
        const icon = shapes.bpmn2.Activity.ACTIVITY_TYPE_ICONS[type];
        if (typeof icon === 'string') {
            const iconColor = attrs['icon-color'] ?? 'black';
            const svgString = icon.replace(/\${color}/g, iconColor);
            if (svgString.startsWith('<svg')) {
                xlinkHref = `data:image/svg+xml,${encodeURIComponent(svgString)}`;
            } else {
                xlinkHref = svgString;
            }
        } else {
            xlinkHref = null;
        }
        return {
            'xlink:href': xlinkHref,
            'data-icon-type': type
        };
    }
}