IonIcon does not appears

Ionic Framework Ionic React
1

I have a problem when displaying an icon, it is not displayed. I got it from https://ionicons.com/

And I save it in

public/assets/icon/person-add-outline.svg

I need to show it with:

IonIcon className=“icono” slot=“start” src=“assets/icon/person-add-outline.svg” >

What Im doing wrong?

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
        <IonGrid>
          <IonRow>
          <IonCol><IonButtons ><IonMenuButton /> </IonButtons></IonCol>
            <IonCol><Busqueda /></IonCol>
            <IonCol><IonIcon className="icono" slot="start" src="assets/icon/person-add-outline.svg" ></IonIcon></IonCol>
          </IonRow>
        </IonGrid>
           
          <IonTitle></IonTitle>
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen>d
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large"></IonTitle>
          </IonToolbar>
        </IonHeader>
        <ExploreContainer  />
      </IonContent>
    </IonPage>
  );
};

.icono{
    width: 50px;
    height: 50px;
}
2

Don’t use ionicons in react that way. Instead, find the icon name you want, remove the slashes, and import it directly:

import { personAddOutline } from 'ionicons/icons'

<IonIcon icon={personAddOutline} />