ion-icon not showing an icon in ionic vue

user_437242 0
Viewed 1179

I created a blank Ionic Vue project and have the following view where I added an ion-icon element and also the IonIcon import:

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Blank</ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Blank</ion-title>
        </ion-toolbar>
      </ion-header>
    
      <div id="container">
        <strong>Ready to create an app?</strong>
        <ion-icon name="home-outline"></ion-icon>
      </div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonIcon } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home',
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonIcon
  }
});
</script>

But i still can not see the Icon, and im also not getting any error.

ionic-framework vue.js
2 Answers

You need to import IonIcon component and individual icons seperately as below

in template

<ion-icon :icon="caretUpOutline" />
// please note, not like this <ion-icon name="caretUpOutline"></ion-icon>


import { IonIcon } from "@ionic/vue";
import { caretUpOutline, caretDownOutline } from "ionicons/icons";

export default {
  name: "test",
  components: { IonIcon },

 setup() {

    return { caretUpOutline }

 }
user_51603860

Try to do so, it helps me and install this package https://www.npmjs.com/package/ionicons

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Blank</ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Blank</ion-title>
        </ion-toolbar>
      </ion-header>
    
      <div id="container">
        <strong>Ready to create an app?</strong>
        <ion-icon :icon="homeOutline"></ion-icon>
      </div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonIcon } from '@ionic/vue';
import { defineComponent } from 'vue';
import {homeOutline} from 'ionicons/icons';

export default defineComponent({
  name: 'Home',
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonIcon
  },
data(){
  return {
    homeOutline,
  }
}
});
</script>
user_150595210
Related