BUG: ion-icon can not work well in ionic/vue

[AlwaysLoveme]

Ionic version:

[] 4.x [x] 5.x

I'm submitting a ...

[x] bug report [ ] feature request

Current behavior: i try to use ionic icon width vue, but it not worked

Expected behavior: can use well

Steps to reproduce:

Related code:

<template>
 <!--can not show icon-->
 <ion-icon name="chevron-forward-outline"></ion-icon>
</template>
<script>
****
import {IonIcon} from '@ionic/vue';
export default defineComponent({
   components: {IonIcon }
})
</script>

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.12.1 (/Users/zhuxian/.nvm/versions/node/v12.19.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.4.4

Capacitor:

   Capacitor CLI   : 2.4.2
   @capacitor/core : 2.4.2

Utility:

   cordova-res (update available: 0.15.2) : 0.15.1
   native-run                             : not installed

System:

   NodeJS : v12.19.0 (/Users/zhuxian/.nvm/versions/node/v12.19.0/bin/node)
   npm    : 6.14.8
   OS     : macOS Big Sur

[MarekGogol]

Hey,

I think you need use icons like that:

template: <ion-icon :icon="checkmarkOutline"></ion-icon>

js:

import { IonIcon } from '@ionic/vue';
import { checkmarkOutline } from 'ionicons/icons';

export default {
    components: { IonIcon },
    setup(){
        return {
            checkmarkOutline,
        }
    },
...

I was struggling why icons does not work as well, but then I find out...

[liamdebeasi]

Our documentation covers examples of this. Please see: https://ionicframework.com/docs/vue/quickstart#adding-icons

[AlwaysLoveme]

Hey,

I think you need use icons like that:

template: <ion-icon :icon="checkmarkOutline"></ion-icon>

js:

import { IonIcon } from '@ionic/vue';
import { checkmarkOutline } from 'ionicons/icons';

export default {
    components: { IonIcon },
    setup(){
        return {
            checkmarkOutline,
        }
    },
...

I was struggling why icons does not work as well, but then I find out...

thanks

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.