IonIcons + VueJS

Ionic Framework Ionic Vue
1

Hello,
I’d like to use ionic icons in my Vuejs ionic project. I created it using ionic CLI, but I can’t use them - they are just not displayed! Here some code snippets - can someone show me why there is no icon? In my TabBar the icons are working!

Thanks,
Jannis

<ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">My Profile</ion-title>
          <ion-buttons slot="end">
            <ion-button @click="alert('Hi')">
              <ion-icon :name="cogOutline"></ion-icon>
            </ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>

import {
  IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonIcon, IonButton, IonButtons, IonLabel
} from '@ionic/vue'
import { cogOutline } from 'ionicons/icons';

export default  {
  name: 'Tab1',
  components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonIcon, IonButton, IonButtons, IonLabel },
  setup(){
    return{
      cogOutline
    }
  }
}
2

U need to import the icon itself too

3

Isn’t it in the code I sent?:

But I’m rather thinking that it is a problem with the Nav Header. If I’m writing some

or only Text instead of the Icon, there is NOTHING.

4

You need to use :icon.

<ion-icon :icon="cogOutline" />