Add custom icon within custom rendered shape

[Sanjana]

Hi,
I am trying to render task shape with my own icon (which is in png file) within rect svg shape as below:

     let rect = this.drawRect(parentNode, 150, 65, TASK_BORDER_RADIUS, 'black');
      this.prependTo(rect, parentNode, null);
      svgAppend(parentNode, customIcon);
      const customIcon = svgCreate('image',{
      href: '../../assets/image.png'});
      svgAppend(rect,customIcon);

I am getting error that : Argument of type ‘Element’ is not assignable to parameter of type ‘SVGElement’.
Type ‘Element’ is missing the following properties from type ‘SVGElement’: ownerSVGElement, viewportElement, oncopy, oncut, and 92 more.

Is there anything wrong with my appraoch?

[Niklas_Kiefer]

There is a custom renderer extension that does exactly the same: element-templates-icons-renderer/ElementTemplatesIconsRenderer.js at main · bpmn-io/element-templates-icons-renderer · GitHub

It uses svgAttr to correctly assign attributes. You can use this one as a reference for your extension.

var icon = svgCreate('image');
svgAttr(icon, {
  href: /* ... */,
  x: 5,
  y: 5,
  width: 18,
  height: 18
});

svgAppend(parentGfx, icon);

[Sanjana]

Hi thanks, it worked!