Icons not rendering properly

[Arian_Gohari]

Hi there,

I’m currently facing some problems rendering lumo icons in my Hilla project. They are for some reason rendered as raw hexadecimal Strings like e.g. “\ea29”.

I opened my Chrome DevTools and noticed the variables for these icons are all written with two backslashes. I can change it in the DevTools by removing one backslash, and then the icon is rendered properly, but I am still confused why it happens and how I can fix it.

Also, first, I was using Maven and I didn’t have this problem. Due to personal preference I switched to Gradle and only now the problem has appeared. I don’t know if there’s any relation, but that’s just the most obvious difference to me between before the problem and now.

Would be super grateful for any help!! I’m new to Vaadin/Hilla and love it in general

[Arian_Gohari]

[Tatu2 (Tatu Lund)]

You did not share code of the view … Thus it is hard to say what is the problem. Those custom properties are meant to be used in before/after pseudoelements content property when font-family is ‘lumo-icons’.

If you want to use lumo icons elsewhere, it is possible with vaadin-icon.

import "@vaadin/icon";
import "@vaadin/icons";
import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';

<vaadin-icon icon="lumo:calendar"></vaadin-icon>

or React

import '@vaadin/icons';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
import { Icon } from '@vaadin/react-components/Icon.js';

<Icon icon="lumo:calendar></Icon>

Documentation is here: Icons | Components | Vaadin Docs

[soroosh.2 (Soroosh Taefi)]

Thanks, @Tatu2!

I mostly used Vaadin icons, and not the Lumo variant. But, for using the Lumo icons, I was missing the import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js'; in my view. When I added it, the Lumo icons are rendered properly, both in Maven and Gradle projects.