Nativescript vue : dynamically setting image src.decode to display font icon

Question

I created a component which is supposed to display a font icon :

<template>
    <Image :src.decode="code" />
</template>

<script>
    const mapping = {wi_owm_200:"&#xf01e;",wi_owm_201:"&#xf01e;",wi_owm_202:"&#xf01e;"};
    
    export default {
        props: {
            icon: String,
        },
        data() {
            return {
                code: String,
            };
        },
        created() {
            this.code = 'font://' + mapping[this.icon];
        }
    };
</script>

In my main page I have this code calling my component :

<template>
    <page>
        <StackLayout>
            <myComponent icon="wi_owm_200" />
        </StackLayout>
    </page>
</template>

<script>
import myComponent from "./myComponent";

export default {
    components: {
        myComponent
    }
}
</script>

When I compile, instead of my pretty icon, I will get the code "&#xf01e"... Meanwhile, directly in my main page this will work out perfectly :

<Image src.decode="font://&#xe900;" />

Here is the playground, if you want to check it live

Any idea to make my component work ?

Answer 1

For Button dynamically I use :text="code" (instead of text.decode="& #xf164;"), where

code = String.fromCharCode(0xf164);

Try it for Image!