Styling Icon in combo box

Flow
1

Hi all.
Happy New Year!

I am adding icons to the option entries in a combo box using the following code:

		docStatusCombo.setRenderer(new ComponentRenderer<>(filterStatusType -> {
			String iconName = "docIcon-" + filterStatusType.getVaadinIcon();
			Div div = new Div();
			
			Div statusTextDiv = new Div();
			Span statusTextSpan = new Span(filterStatusType.getLabel());
			statusTextDiv.addClassName("filter-status-option-text-div");
			statusTextDiv.add(statusTextSpan);
			
			Div statusIconDiv = new Div();
			statusIconDiv.addClassName("filter-status-option-icon-div");
			Icon statusIcon = new Icon(filterStatusType.getVaadinIcon());
			statusIcon.addClassName(iconName);
			statusIconDiv.add(statusIcon);
			
			div.add(statusTextDiv, statusIconDiv);
			return div;
		}));

I am trying to add css to style the entries, but it doesn’t seem to get applied. Is it possible to do this jor am I going about this the wrong way?

Thank you!

2

If you just need to set size and color, the easiest way in your component renderer is to use Java API of the Icon

Icon logo = new Icon(VaadinIcon.VAADIN_H);
logo.setSize("100px");
logo.setColor("orange");

https://vaadin.com/components/vaadin-icons/java-examples

I noticed that icon.setClassName("classname") seems to have no effect, which may be a bug.

However the icon name can be used as css selector like this

[icon="vaadin:male"]
 {
	color: blue;
}

[icon="vaadin:female"]
 {
	color: red;
}

And import it using @CssImport(value = "./styles/combobox-item-icon.css", themeFor = "vaadin-combo-box-item")

3

Hi Tatu,

Thank you for the quick response.

The values are going to be set dynamically depending on the item being added to the combo box. Is there a way to programmatically pull out the values of a particular class from my css file that I created? It may let me set the style if I set it inline?

statusIcon.getElement().setAttribute("style", "...");