How to Dynamically pass Icon Names

I have a Template which has several child components one of the components take a array as prop.

In that array, I have a field named icon which contains the name of the icon that is to be set…

For example, I have a list and a component that take an array field as shown below

const list = [];

list =[
{
title:"item1",
icon:"boat-outline"
}
{
title:"item1",
icon:"airplane-outline"
}
]

My Problem is how can i set this icon inside my child component.

Attempt 1
i added the

<script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>

to the index.html and used name={{listItem.icon}} in my template… and that did not work, in browser i get the following error

Failed to load module script: The server responded with a non-JavaScript MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.

Attempt 2
Inside my child component i did import "ionicons/icons", and in data i returned a listIcon a second array full of Icon names, and binded them using :icon
this still did not work…

NOTE: i am using Options API and Not Composition

Any Suggestion or pointers

10 posts - 3 participants

Read full topic