GenericFontIcon resource does not support fonts icons with multiple css classes

Background

The GenericFontIcon class uses fontFamily attribute as css class on the client side. Following:

   button.setIcon(new GenericFontIcon("font-awesome-5-solid", 0x0f9));

results in client side:

  <span class="v-icon font-awesome-5-solid">ù</span>

Issue

It is not possible to specify multiple classes in that attribute. When I do this:

   button.setIcon(new GenericFontIcon("font-awesome-5-solid fa-spin", 0x0f9));

The (wrong) result is:

<span class="v-icon font-awesome-5-solid+fa-spin">ù</span>

Expected result:

<span class="v-icon font-awesome-5-solid fa-spin">ù</span>

What it is good for

I need multiple classes to use font awesome 5 animations.

How to fix it

The reason:

• fontFamily is encoded using URLEncoder.encode(filename, UTF_8.name()) which encodes spaces as +.
• client side decodes fontFamily using com.google.gwt.http.client.URL.decode which keeps spaces as they are.

The solution would be to use URL.decodeQueryString method instead.

Start by reading server/src/main/java/com/vaadin/server/ResourceReference.java and client/src/main/java/com/vaadin/client/ui/FontIcon.java, following how fontFamily is encoded and decoded. Verify that a GenericFontIcon value containing multiple CSS classes is rendered with spaces between the classes rather than plus signs, matching the expected span output.