Set Icon and text inside the ComboBox but not working

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();
    Image image = new Image("icons/img_other_rates.png", "english");
    cb.setRenderer(new ComponentRenderer<HorizontalLayout, Language>(lang -> {
        HorizontalLayout layout = new HorizontalLayout();
        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.

Hello Dilip,

I think this should work for you

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


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

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

	return div;

	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.

( could be also an option.