Custom element with custom icon

Developers
1

Hello there!

I’ve been trying to do a custom element in bpmn js. I customized the palette and the context pad with the new element like this.
My question is how can i customize the icon with any image I want?
I found this code, where the class property describes a css class, but I can’t find that css anywhere.
image

Thank you for your earliest reply!

1 Like
2

Hi,

The icons are added via pseudoelements (:before) combined with bpmn-font:

image

Apart from icon fonts, you could also use background property on a pseudoelement to achieve a similar result:

image

.bpmn-icon-screw-wrench:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: 0;
    background: url(https://upload.wikimedia.org/wikipedia/en/e/ed/Nyan_cat_250px_frame.PNG);
    background-size: cover;
}
1 Like
3

A custom image can now be also provided via entry#imageUrl property. Check out how it’s used in this project: bpmn-js-color-picker/ColorContextPadProvider.js at c9af67475743e8f0452f927a4d5a768d6466bd91 · bpmn-io/bpmn-js-color-picker · GitHub