Hello, I’d like to know if there’s a way to add custom Icons. I don’t want to change the function of the Start Event, for example, but I want the Icon to be shown in another way. I already read some examples on GitHub, but I don’t understand what I have to do, as there’s no step-by-step instruction for it. I don’t have any experience with Java, but I got the task to create a Web based modelling program just like Bpmn.io, but with different symbols. Thanks in advance
Isn’t there some kind of library where the icons come from? I was looking for the source of the icons shown in the modeller, and it seems like they are from the site “fontello”, where you can also create your own set of icons and download them.
Before that, you can also edit the codes that the icons are assigned to.
As seen in the screenshot, “content” includes a number which can be changed.
If so, the icon will change to the icon assigned to this number (e.g. e800 is the wrench). Isn’t there a way to just change the library where the content (icons) is taken from? For example,
e800 is a different icon than the default one?
Hi @Jimmy123!
Out of the box icons are not pluggable, i.e. meant to be changed easily.
As a little bit of background icons are injected into the application in two different ways:
- Added to the palette (your picture) and context pad via a font (CSS class + rendered symbol)
Create a custom palette / context pad provider to change the icons displayed - Rendered on the element on the canvas using the
BpmnRenderer Create a custom BpmnRendererto change the icon on rendered elements
Hope this helps.
1 Like
Danke für deine Antwort, das, was ich im Prinzip erreichen möchte, ist einfach, dass ich eigene Icons benutzen möchte. Ich habe mir die Dateien angeguckt, die du mir beschrieben hast, allerdings weiß ich nicht, was ich damit anfangen soll. Kannst du mir vielleicht genauer beschreiben, wie ich es schaffe, dass ich eigene Icons nutzen kann? Ich habe 15 Symbole, die dargestellt werden müssen, habe es zwar geschafft, die Symbole anders in der Palette anzeigen zu lassen, allerdings sind die Symbole immer noch die gleichen, wenn ich diese versuche aus der Palette zu ziehen und zu platzieren. Kannst du mir da weiterhelfen oder kennst du eine alternative, um eine drag and drop Funktion mit eigenen Funktionen zu nutzen?
@Jimmy123 Could you keep conversation in English so more people can follow along?
Given Change Icons of Elements - #3 by nikku, what worked and what did not? At this stage it is probabl best if you share a CodeSandBox and show what’s working (and what not).
I think you want that, right？
You can do this by customize the palette，here is an article that may solve your problem. But it’s in Chinese, But you can use Google Translate to read it
1 Like