Styling Icon in combo box

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());
			Div statusIconDiv = new Div();
			Icon statusIcon = new Icon(filterStatusType.getVaadinIcon());
			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!

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);

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

	color: blue;

	color: red;

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

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", "...");