Icons not showing in production if @vaadin/icons isn't imported

[tarekoraby]

Related to vaadin/hilla#1957.

If a react component Icon is used without importing @vaadin/icons, the icon is displayed in development mode, but not when a production bundle is created.

To reproduce:

1. Create a new app: npx @hilla/cli init my-hilla-app
2. Add an Icon element to the hello view, only importing @hilla/react-components/Icon.js (without @vaadin/icons)
3. Run the project in dev mode mvn (observe that the icon is showing)
4. Create a production bundle using mvn clean package -Pproduction, and run it using java -jar (observe the icon isn't there).

Desired solution

I can think of two fixes/improvements:

• Ideally, only importing @hilla/react-components/Icon.js should be sufficient for rendering icons in dev and prod.
• If the first option isn't (easily) possible, the dev mode should throw an error + NOT show the icon if @vaadin/icons isn't imported.

[web-padawan]

In dev mode we use bundles which include @vaadin/icons import.

Ideally, only importing @hilla/react-components/Icon.js should be sufficient for rendering icons in dev and prod.

I'm not sure if that's a good idea as some users might want to use Icon component with a custom iconset.
Forcing the Icon component to import @vaadin/icons would mean extra 300 kB of minified JS for these users.

[yuriy-fix]

We would probably need to document this behaviour in Icon docs as we cannot exclude icons from the bundle, nor we want to have an explicit check for development mode within icons themself as it's not a part of the component.