ionic-frameworkionic5ionic-vue

Why ion-icon is not showing in ionic vue project?

I am trying to add icon with ion-icon in my ionic vue project. I copied code from official page

<ion-icon name="aperture-outline"></ion-icon>

here is my template

<template>
  <ion-content class="content">
    <h1>Hello</h1>
    <ion-icon name="aperture-outline"></ion-icon>
    <h1>Hello2</h1>
  </ion-content>
</template>

<style scoped>
.content {
  --color: rgb(6, 114, 141);
  --background: rgb(240, 234, 234);
  --padding-top: 50px;
}
</style>

Here is my output

enter image description here

Why my icon is not showing?

N.B this answer does not solve my problem

Solution

  • I'm pretty sure you need to update the naming convention for the icon it self -- the docs seem to be incorrect on this point, if I'm not mistaken.

    So:

    <ion-icon name="aperture-outline"></ion-icon>

    becomes:

    <ion-icon name="apertureOutline"></ion-icon>

    Same with your import and return in your setup. This worked for me at least.