Change the notation of Start and End Event to other shapes

Developers
3

Hello,
I figure out how to change the start event, end event service task and task shapes in the palette,
but when I drag any of these elements into the diagram for example the StartEvent (the red rounded square) i get the default shapes
Do you have any clues what I am missing?
code source link: https://drive.google.com/open?id=0B5ruioHjOasTY25ZUTNsUnRWWDA

Main changes:

under \custom-elements\dist\vendor\bpmn-font\css
I updated bpmn.css and bpmn-embedded.css to include the new classes which points to a new fonts (\custom-elements\dist\vendor\bpmn-font\font\bpmn.svg)

.bpmn-icon-Status1-open:before {
  content: "\e8c5";
}


 .bpmn-icon-Status1-closing:before {
  content: "\e8c5";
}

.bpmn-icon-Status2-free-flow:before {
			content: "\e8c6";
}
		
.bpmn-icon-Status2-status:before {
			content: "\e8c6";
}

then in the CustomPalette.js

'create.start-event': createAction(
			'bpmn:StartEvent', 'event', 'bpmn-icon-Status1-open'  //bpmn-icon-start-event-none icon-Status1-open
		),
//		'create.intermediate-event': createAction(
//			'bpmn:IntermediateThrowEvent', 'event', 'bpmn-icon-intermediate-event-none'
//		),
		'create.end-event': createAction(
			'bpmn:EndEvent', 'event', 'bpmn-icon-Status1-closing'  //icon-Status1-closing bpmn-icon-end-event-none
		),
//		'create.exclusive-gateway': createAction(
//			'bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-xor'
//		),
//		'create.task': createAction(
//			'bpmn:Task', 'activity', 'bpmn-icon-task'
//		),
		
		'create.task': createAction(
			'bpmn:Task', 'activity', 'bpmn-icon-Status2-free-flow'
		),
			
		'create.ServiceTask': createAction(
			'bpmn:ServiceTask', 'ServiceTask', 'bpmn-icon-Status2-status'
		),

thank you in advance