Custom element with custom image

Developers
1

Hi there!

Currently I am trying to create custom element with bpmn js. I followed this example and currently my current element looks like this:
image

The next step would be adding a little icon to the top left of the “Examine situation” task, like for example service task has that gear icon on the top left.

My question is how could I add an icon to this custom element? I read that it can be done through PathMap, but I could not figure it out how should I do it yet.
Any other solution would be perfect, I don’t insist on doing it with PathMap.

I would really appreciate if somebody could help me with this!

Thanks a lot!

2

you can add customRenderer: [‘type’, CustomRenderer]
and overwite the bpmnRenderer.drawShape method

eg

drawShape(parentNode: SVGElement, element: Shape) {
    const shape = this.bpmnRenderer.drawShape(parentNode, element);
    if (element.type === "bpmn:UserTask") {

//add your image to dom node
}