For the appendPreview service task, the icon is different from the real situation when it comes out.Also, the template custom icon cannot be previewed appendPreview

[zxuanhong]

Describe the Bug

1. For the appendPreview service task, the icon is different from the real situation when it comes out

   

2. The template custom icon cannot be previewed appendPreview

   

Steps to Reproduce

1. create CustomContextPad add append service task,code:

   
   import { isEventSubProcess } from 'bpmn-js/lib/util/DiUtil';
   import { is } from 'bpmn-js/lib/util/ModelUtil';
   import { forEach, assign } from 'min-dash';
   const LOW_PRIORITY = 400;
   export default class CustomContextPad {
   constructor(
   bpmnFactory,
   commandStack,
   config,
   contextPad,
   create,
   elementFactory,
   injector,
   translate,
   appendPreview
   ) {
   this.create = create;
   this.bpmnFactory = bpmnFactory;
   this.commandStack = commandStack;
   this.elementFactory = elementFactory;
   this.translate = translate;
   this.appendPreview = appendPreview;
   if (config.autoPlace !== false) {
     this.autoPlace = injector.get('autoPlace', false);
   }
   contextPad.registerProvider(LOW_PRIORITY, this);
   }
   
   getContextPadEntries(element) {
   const {
     autoPlace,
     create,
     elementFactory,
     translate,
     appendPreview,
     commandStack,
     bpmnFactory,
   } = this;
   var businessObject = element.businessObject;
   
   // service task
   function appendServiceTaskStart(event, element) {
     const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask' });
     create.start(event, shape, {
       source: element,
     });
     appendPreview.cleanUp();
   }
   
   function appendServiceTask(event, element) {
     if (autoPlace) {
       const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask' });
       autoPlace.append(element, shape);
       appendPreview.cleanUp();
     } else {
       appendServiceTaskStart(event, element);
     }
   }
   function previewServiceTaskStart(event, element) {
     if (autoPlace) {
       appendPreview.create(element, 'bpmn:ServiceTask');
       return () => {
         // mouseout
         appendPreview.cleanUp();
       };
     } else {
       return null;
     }
   }
   if (
     !is(businessObject, 'bpmn:EndEvent') &&
     !businessObject.isForCompensation &&
     !isEventType(businessObject, 'bpmn:IntermediateThrowEvent', 'bpmn:LinkEventDefinition') &&
     !isEventSubProcess(businessObject)
   ) {
     let actions = {};
     assign(actions, {
       'append.service-task': {
         group: 'model',
         className: 'bpmn-icon-service-task',
         title: translate('Append ServiceTask'),
         action: {
           dragstart: appendServiceTaskStart,
           click: appendServiceTask,
           hover: previewServiceTaskStart,
         },
       },
     });
     return actions;
   }
   return {};
   }
   }

CustomContextPad.$inject = [ 'bpmnFactory', 'commandStack', 'config', 'contextPad', 'create', 'elementFactory', 'injector', 'translate', 'appendPreview', ];

function isEventType(eventBo, type, definition) { var isType = eventBo.$instanceOf(type); var isDefinition = false;

var definitions = eventBo.eventDefinitions || []; forEach(definitions, function (def) { if (def.$type === definition) { isDefinition = true; } });

return isType && isDefinition; }

### Environment

 - Browser: [e.g. IE 11, Chrome 69]  126.0.6478.63
 - OS: [e.g. Windows 7] macos 14.5 
 - Library version: [e.g. 2.0.0] bpmn js 17.8.3

[philippfromme]

What customizations did you do exactly? Adding a custom context pad entry with a custom icon is independent from shape rendering. If you're still creating a service task under the hood a service task will be rendered. If you want your service task to have a custom icon based on some criteria you need a custom renderer: https://github.com/bpmn-io/bpmn-js-example-custom-rendering

[zxuanhong]

@philippfromme I customize is the element template。But the element template icon cannot be displayed in appendPreview