I’m having an issue getting an Ionicon working with an IonFabButton
in Ionic React. I’m currently using the add icon but I have tried others and the FAB is always blank. I am using a couple of Ionicons in my IonMenu
and they work just fine, so at the moment, this seems isolated to an IonFabButton
. I even inspected the element and there is no svg element on that button. I have also tried the name="add"
approach, as well as icon={add}
which seems to be the recommended approach for React apps. Here’s an example of where the Ionicon is failing to display:
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Ionic Blank</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
The world is your oyster.
<p>
If you get lost, the{' '}
<a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/">
docs
</a>{' '}
will be your guide.
</p>
<IonFab vertical="bottom" horizontal="end" slot="fixed">
<IonFabButton>
<IonIcon slot="start" icon={add} />
</IonFabButton>
</IonFab>
</IonContent>
</IonPage>
Any help would be appreciated.