Set Icon and text inside the ComboBox but not working

Flow
1

I am looking for a drop-down which will have country name and it’s flag in the list.
I am using below code by using Vaadin-10, unfortunately i am not able to do so please suggest how to achieve this.

ComboBox<Language> cb = new ComboBox<>();
    List<Language> language = new ArrayList<>();
    Language eng = new Language();
    eng.setName("English");
    eng.setIcon("icons/img_other_rates.png");
    language.add(eng);
    cb.setItems(language);
    Image image = new Image("icons/img_other_rates.png", "english");
    cb.setRenderer(new ComponentRenderer<HorizontalLayout, Language>(lang -> {
        HorizontalLayout layout = new HorizontalLayout();
        layout.add(image);
        layout.add(new Label("En"));
        return layout;
    }));.

I have attached the picture which show the actual requrements. I have googled and go through many approach but unable to find the exact answer.
33220.png

2

Hello Dilip,

I think this should work for you

ComboBox<Country> combobox = new ComboBox<>();

combobox.setItemLabelGenerator(Country::getCountryName);

combobox.setRenderer(new ComponentRenderer<>(country -> {
	Div div = new Div();

	div.add(country.getFlag());
	div.add(new Text(country.getCountryName()));

	return div;
}));
combobox.setItems(getCountries());

add(combobox);

	private class Country {
        private final String countryName;
        private final Icon flag;

        public Country(String countryName, Icon vaadinIcon) {
            this.countryName = countryName;
            this.flag= vaadinIcon;
        }

        public String getCountryName() {
            return countryName;
        }

        public Icon getFlag() {
            return flag;
        }
    }

    public List<Country> getCountries() {
        return Arrays.asList(new Country("Spain", new Icon(VaadinIcon.CAR)), new Country("Finland",new Icon(VaadinIcon.AIRPLANE)),new Country("Germany",new Icon(VaadinIcon.TRAIN)));
    }

Please, notice that it is not possible to use use a ComponentRenderer on the selected row of the ComboBox.

[ListBox]
(https://vaadin.com/components/vaadin-list-box/html-examples/list-box-basic-demos) could be also an option.