Title: How to add search icon in Vaadin ComboBox?
Tags: java;combobox;vaadin
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.
//==========================================
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?
Comment: it's the one Vaadin created when i was creating the project. didn't temper any with the themes.

Comment: Which theme are you using? Valo?

Here is the accepted answer: 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 -&gt; {/* 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(&quot;no-focus&quot;); // remove the annoying focus effect
searchButton.addClickListener(event -&gt; {/* 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:
Comment for this answer: @defaultlocale thanks for the vote of confidence :-). It's not perfect either with all its quirks, but at least it's a starting point
Comment for this answer: Now, that's an excellent answer! I wish I could upvote this twice.

Here is another answer: 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:
Comment for this answer: I cannot imagine just yet how do you "create a button and move it inside the input with CSS". You mean manipulating z-index values or something?
Comment for this answer: Thanks, @defaultlocale
Comment for this answer: worked. but how do i put a listener on the icon? i'm looking to use that icon as a button
Comment for this answer: @ash__999, In this example, you won't be able to do it. You can try to create a button and move it inside the input with CSS. Another option is to implement a whole new component with GWT. P.S. In [your example](https://vaadin.com/icons) the icon is used for decoration only. You might want to update your question to include all the necessary requirements.
Comment for this answer: @zygimantus Frankly, I didn't put much effort into this comment and I don't remember what exactly I had in mind. Most probably I was thinking about moving the button on top of the input field. Something similar to this: https://jsfiddle.net/5e6doc0m/3/

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:05/16/17', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<java><combobox><vaadin>', 'Title': 'How to add search icon in Vaadin ComboBox?', 'ViewCount': 1553, 'id': 44007835, 'user_AboutMe': None, 'user_AccountId': 9660777.0, 'user_DisplayName': 'ash__999', 'user_Reputation': 161.0, 'user_Views': 30.0, 'user_id': 7168929.0}}