[SOLVED] Ionicon doesn't display on Ionic React FAB button

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:

        <IonButtons slot="start">
          <IonMenuButton />
        <IonTitle>Ionic Blank</IonTitle>
    <IonContent className="ion-padding">
      The world is your oyster.
        If you get lost, the{' '}
        <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/">
        </a>{' '}
        will be your guide.
      <IonFab vertical="bottom" horizontal="end" slot="fixed">
          <IonIcon slot="start" icon={add} />

Any help would be appreciated.

import { add } from 'ionicons/icons'


<IonIcon icon={add} />

Source :- this

1 Like

Removing slot="start" actually fixed the problem. It’s odd that the slot prop caused the icon to not render in this case, but either way, it’s working now. Thanks!

The icon is the only thing in a FAB usually so you do not need the slot directive

1 Like