bug: Ionic/React IonIcons not working by setting name property

Bug Report

Ionic version:

[Ionic/React] 4.11.0

Current behavior:

According to IonIcons documentation, icons should be able to set up by providing name property. Some of icons shows up by using this technique, most of them does not work (they don’t show up)

Expected behavior:

Icons be displayed by setting up name property, like <IonIcon name="star" slot="start" />

Steps to reproduce:

• Create a simple Ionic/React app using the steps mentioned at https://ionicframework.com/blog/announcing-ionic-react/

• npm i -g ionic

• ionic start my-react-app

• Pick “React” ad frontend framework

• Pick “sidemenu” as starter template

• Run ionic serve to start your app

• Open http://localhost:8100 to run the app on the browser

• Open sidemenu and click on “List” option

• See there is a list with a bunch of items with icons

• Now go to the source code, open file /my-react-app/src/pages/List.tsx

• Find line 41 and replace icon={icons[x - 1]} for name="arrow-back"

• Check each of items on the list display the arrow back icon

• Go to the same line and now use other icons, like home or star

• See none of those icons are displayed and no errors are displayed on the console

Related code:

This display arrow back icon correctly

<IonIcon name="arrow-back" slot="start" />

This does not display neither home or star icon

<IonIcon name="home" slot="start" />
<IonIcon name="star" slot="start" />

Other information:

Keep enabled the option to set up icons as strings is very important, specially for app/components that use their icons as strings configured on a database for instance, or on a config file.

[kingwill101]

would be nice if this is mentioned in the docs.

[ElNinjaGaiden]

That’s not what the documentation say. If that’s the case, why the property still exists? Totally a bummer given the use case I mentioned.