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

Question

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

Answer 1

You have to replace

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

with

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

and import the icon in the script section i.e.

import { apertureOutline } from "ionicons/icons";

As at the time of posting this answer, I'm not exactly sure there's an icon with the name in the question though

Answer 2

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.