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

Ionic Framework
1

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.

3 
import { add } from 'ionicons/icons'

...

<IonIcon icon={add} />

Source :- this

1 Like
4

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!

5

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

1 Like