Why are Ionicons not showing up (Ionic Vue)

Hi, I don’t understand why my icons aren’t showing up. I am using Ionic/vue version 5.4.0 and ionicons version 5.4.0 I have the following page:

<template>
    <ion-page>
        <ion-header> 
            <ion-toolbar>
                <ion-title>Icon Test</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-icon name="heart" size="large"></ion-icon>
            <ion-icon name="heart-outline" size="large"></ion-icon>
            <ion-icon name="plus" size="large"></ion-icon>
        </ion-content>
    </ion-page>
</template>

<script>
import { IonPage, IonHeader, IonToolbar, IonContent, IonIcon} from '@ionic/vue';

export default {
    name: 'icontest',
    data: function() {
      return {
      };  
    },
    components: {
        IonPage,
        IonHeader,
        IonToolbar,
        IonContent,
        IonIcon,
    },
}
</script>
<style scoped>

ion-icon {
    color:white;
}

</style>

However, when I go to the page, the icons aren’t displayed. I can see them in the DOM, for example:

“”

But nothing shows up on the page. The project has TypeScript disabled by following the steps in the Ionic Vue guide. Any help is greatly appreciated.

You must import icons from ionicons/icons and add them as variables in your template

<template>
	<ion-page>
		<ion-header> 
			<ion-toolbar>
					<ion-title>Icon Test</ion-title>
			</ion-toolbar>
		</ion-header>
		<ion-content>
			<ion-icon :icon="heart" size="large"></ion-icon>
			<ion-icon :icon="heartOutline" size="large"></ion-icon>
			<ion-icon :icon="add" size="large"></ion-icon>
		</ion-content>
	</ion-page>
</template>

<script>
import { IonPage, IonHeader, IonToolbar, IonContent, IonIcon} from '@ionic/vue';

import { heart, heartOutline, add } from "ionicons/icons";

export default {
    name: 'icontest',
    data: function() {
      return {
      };  
    },
    components: {
			IonPage,
			IonHeader,
			IonToolbar,
			IonContent,
			IonIcon,
    },
  setup() {
    return {
			heart, 
			heartOutline, 
			add
    };
  }
}
</script>
1 Like

Thank you a lot for helping me!

Thanks, solved my issue too, isn’t there any way to import all icons? without naming them 1 by 1?