Button size with ThemeResource(...) Icon

Hello vaadin people,

I want to create an image which acts like a button. Now I added my image as a ThemeResource Icon to the Button. The problem is, that the whole Button/Image gets to large as the Button width adapts to the ThemeResource Image size.

Is it possible to set the Size of the Button/Image?

final GridLayout containerLocale = new GridLayout(2, 1);
        containerLocale.setSpacing(true);
        containerLocale.setSizeUndefined();

        final Button buttonDe = new Button();
        buttonDe.setStyleName(ValoTheme.BUTTON_LINK);
        buttonDe.setIcon(new ThemeResource("img/DE.svg"));
        containerLocale.addComponent(buttonDe);

        final Button buttonGb = new Button();
        buttonGb.setStyleName(ValoTheme.BUTTON_LINK);
        buttonGb.setIcon(new ThemeResource("img/GB.svg"));
        buttonGb.setWidth("10px"); // Not working
        buttonGb.setHeight("10px"); // Not working
        buttonGb.addClickListener(new ClickListener() {
        containerLocale.addComponent(buttonGb);

Hi Simon,

the following works for me:

Button iconLink = new Button(new ThemeResource("my/path/logo.png"));
        iconLink.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
        iconLink.addStyleName(ValoTheme.BUTTON_BORDERLESS);
        iconLink.setHeight(245, Unit.PIXELS); // logo.png Height
        iconLink.setWidth(400, Unit.PIXELS); // logo.png Width
        iconLink.addClickListener(new ClickListener() {

            @Override
            public void buttonClick(ClickEvent event) {
                UI.getCurrent().getPage().open("https://www.google.com", "_new", false);
            }
        });

regards

Johannes

Thanks for your answer Johannes!

Still got the same Problem.

public class TestView extends AbsoluteLayout {

    public TestView () {
        setSizeFull();
        final Component localeSelection = buildLocaleSelection();
        addComponent(localeSelection, "left: 10px; top:10px");
    }


private Component buildLocaleSelection() {
        final GridLayout containerLocale = new GridLayout(2, 1);
        containerLocale.setSpacing(true);
        containerLocale.setSizeUndefined();

        final Button buttonDe = new Button();
        buttonDe.setIcon(new ThemeResource("img/DE.svg"));
        buttonDe.setStyleName(ValoTheme.BUTTON_ICON_ONLY);
        buttonDe.setStyleName(ValoTheme.BUTTON_BORDERLESS);
        buttonDe.setWidth(20, Unit.PIXELS);
        buttonDe.setHeight(20, Unit.PIXELS);
        buttonDe.addClickListener(new ClickListener() {
            @Override
            public void buttonClick(final ClickEvent event) {
                // ...
            }
        });
        containerLocale.addComponent(buttonDe, 0, 0);
        return containerLocale;
    }
}

Hi Simon,
can you try replacing "setStyleName(..)" with "addStyleName(..)"? 

"setStyleName(..)" overrides all custom class selectors you define, which means that only one style gets applied to your Button.

regards

Johannes