How add icon into node render?

[pro100efim]

Good evening community, I store some information in each node that I add there through the modeler, depending on the data, I would like to display icons inside the block, preferably they can be interactive (support hover) how to achieve this behavior?

[philippfromme]

You need a custom renderer for this. Either one that knows certain icons and renders them based on the data found in the element or one that has the ability to render any icon found in the element. Check out this example: GitHub - bpmn-io/bpmn-js-example-custom-rendering: An example of creating custom rendering for bpmn-js

[pro100efim]

thanks for the answer, now the main difficulty is to “embed” the icons that I import as icons into the nodes, I do not quite understand how to do this

[pro100efim]

i try something like this:

 if (shape.type === 'bpmn:UserTask') {
            const taskNode = this.bpmnRenderer.handlers['bpmn:Task'](parent, shape)
            svgAttr(taskNode, 'stroke-dasharray', 3)

            const testImg = svgCreate('image', {
                x: 0,
                y: 0,
                width: shape.width,
                height: shape.height,
                href: '/assets/catch.svg',
            })

            svgAppend(taskNode, testImg)
            return taskNode
        }