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

[ElNinjaGaiden]

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.

[elylucas]

HI @ElNinjaGaiden,

In Ionic/React, setting the name doesn't work, instead you use icons by importing the icon from 'ionicons/icons' and then setting that icon to the icon prop on IonIcon like so:

import { add } from 'ionicons/icons'

...

<IonIcon icon={add} />

Sorry, this isn't documented very well right now on the IonIcons site, we will get that updated.

[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.

[glenfordwilliams]

would be nice if this is mentioned in the docs.

[Psvensso]

Current IonBackButton requires icons specified as a string,
this also fails obviously since you need to provide it with a string.

declare type Props = Omit<LocalJSX.IonBackButton, 'icon'> & IonicReactProps & { icon?: { ios: string; md: string; }; ref?: React.RefObject<HTMLIonBackButtonElement>; };

How to implement this when i can provide them with icons?

@elylucas

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.