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

Issue

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

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.

Answered By - James Duncan