Search code examples
iconspngvaadin23

Create my own icons from png files in vaadin 23


I have couple .png files and I need to create icons for the button. Initially it will be a first image and when button is clicked and action is successful, the image shall be replaced with the second one. What I can see, you can create only predetermined Vaadin icons. Documentation does not even provide images of these icons, only names, therefore I can't even decide if any of those icon will be suitable for me. If anyone knows how to do it, I will appreciate the tip.


Solution

  • The setIcon method of the Button component actually accepts any component as a parameter. Thus if you want to use png-file as a icon, you can just create Image component using png as a resource for it.

    Image image = new Image(png);
    Button button = new Button("Button");
    button.setIcon(image);
    

    The font-icons from Vaadin Icons collection are naturally more light weight, and you can find visual map of the icons here if you use them instead: https://vaadin.com/docs/latest/components/icons