Ionic 5 Framework – Icônes personnalisées

Après avoir démarré l’application avec le CLI Ionic, copiez les fichiers SVG dans le dossier src/assets. Cela fonctionne également lorsque vous créez un sous-dossier dans le répertoire assets et que vous y copiez les ressources.

Dans le modèle, vous pouvez alors référencer les icônes SVG avec la propriété src du composant ion-icon. Indiquez le chemin d’accès correct au fichier SVG et le composant affiche l’icône.

<ion-icon src="assets/mon_icone.svg"></ion-icon>

Comme dans Ionic 3 et 4, vous pouvez afficher des icônes sur les boutons.

<ion-button>
  <ion-icon slot="start" src="assets/point-gauche.svg"></ion-icon>
  Icone à gauche
  </ion-button>

  <ion-button>
  Icone à Droite
  <ion-icon slot="end" src="assets/point-droit.svg"></ion-icon>
  </ion-button>

  <ion-button>
    <ion-icon slot="icon-only" src="assets/smartphone.svg"></ion-icon>
  </ion-button>
  <ion-button>
    <ion-icon slot="icon-only" src="assets/codebarre.svg"></ion-icon>
  </ion-button>
  <ion-button>
    <ion-icon slot="icon-only" src="assets/test.svg"></ion-icon>
  </ion-button>

Vous pouvez même aussi intégrer le code du SVG directement dans le composant ion-icon avec la propriété src.

<ion-icon src='data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M384 0h-288c-17.6 0-32 14.399-32 32v448c0 17.6 14.399 32 32 32h288c17.6 0 32-14.4 32-32v-448c0-17.601-14.4-32-32-32zM240 488.891c-13.746 0-24.891-11.145-24.891-24.891s11.145-24.891 24.891-24.891 24.891 11.145 24.891 24.891-11.145 24.891-24.891 24.891zM384 416h-288v-352h288v352z"></path></svg>'></ion-icon>

Leave a Reply