How to add search icon in Vaadin ComboBox?

Question

I have a ComboBox that allows selection of the given items, and an icon that accepts the selection:

the functionality is all fine.

I'm looking for the effect to get the search icon into the comboBox. like in Vaadin Icons:

How is this done?

I tried

comboBox.setIcon(new ThemeResource("search.png"));

it didn't do any change.

backend developer here - not good on front-end tools.

//==========================================

EDIT:

one thing i can think of is to make the border of ComboBox disappear (don't know yet how), and make a border on the component that contains both the icon and the comboBox. is there another/better way?

Answer 1

Actually, looking at that page's source, and I could be wrong but, it does not seem to be a standard Vaadin combo-box

An alternative workaround based on your discussion with @defaultlocale, could be grouping a button with the combo like this

or this:

Anyway, you can tweak the code below to your liking and you can also check out the sources of the sampler for more examples.

public class ComboWithIcon extends CssLayout {
    public ComboWithIcon() {
        // basic item configuration
        ComboBox comboBox = new ComboBox();
        
        Button searchButton = new Button();
        searchButton.setIcon(VaadinIcons.SEARCH);
        searchButton.addStyleName(ValoTheme.BUTTON_FRIENDLY); // remove this to have a regular button
        searchButton.addClickListener(event -> {/* add button listener here */ });

        // add components to the layout - switch these to have the button to the left of the combo
        addComponent(comboBox);
        addComponent(searchButton);

        // set group style
        addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);
    }
}

---

Later edit

Based on the above and your later edit, you can also remove their borders, group them within a layout and add the layout to a panel for the overall border effect (there is probably a more elegant solution to get the border, but I haven't found any default styles and I don't have more time to investigate, so suggestions are welcome):

public class ComboWithIcon extends Panel {
    public ComboWithIcon() {
        // basic item configuration
        ComboBox comboBox = new ComboBox();
        comboBox.addStyleName(ValoTheme.COMBOBOX_BORDERLESS);

        Button searchButton = new Button();
        searchButton.setIcon(VaadinIcons.SEARCH);
        searchButton.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
        searchButton.addStyleName("no-focus"); // remove the annoying focus effect
        searchButton.addClickListener(event -> {/* add button listener here */ });

        // add components to the layout - switch these to have the button to the left of the combo
        CssLayout layout = new CssLayout(searchButton, comboBox);
        // set group style
        layout.addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);

        setContent(layout);
        setWidthUndefined(); // fit the component widths instead of expanding by default
    }
}

with a minor theme tweak to avoid the focus style on the button

.v-button-no-focus:after {
  content: none;
}

and get:

Answer 2

Probably you can take the css from Vaadin Icons page and adjust it to suit your application.

Sample java code:

ComboBox comboBox = new ComboBox("Combobox");
comboBox.addStyleName("searchbox");

Sample SASS:

.v-filterselect-searchbox:before {
    font-family: FontAwesome;
    content: "\f002"; //search icon
    left: 10px;
    position: absolute;
    top: 0;
    line-height: 35px;
}

.v-filterselect-searchbox .v-filterselect-input{
    padding-left: 30px;
}

You'll probably need to adjust offset values to align the icon properly in your theme. Also, you'll have to set the combobox width explicitly, since input text padding is set in CSS.

comboBox.setWidth("400px");

The end result: