[SOLVED] Using one Icon Set Across all Themes

1

Hello, it’s me again with my noob questions.

I’m developing an app for WEB, Cordova-iOS and Cordova-Android with Last Version of F7 VUE.

I need to find an easy way to use icons across all themes, now im using:

<f7-list-item link="/admin/est/" view=".view-main" panel-close title="Establecimientos">
  <f7-icon slot='media' f7="home" ios="f7:home" md="material:home"></f7-icon>
</f7-list-item>

But it’s a tedious work to find the according f7 icon for WEB, for iOS and the material icon for Android.

There’s some “easy” way to use just 1 set of icons? (without all that markup)
I’ve tried to do this:

  <f7-list-item link="#" title="John Doe" after="Cleaner">
    <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
  </f7-list-item>

But it doesn’t seem to work in material theme and also i dont know what icon set should i use to find the correct icon name.

I would like to use (if it’s possible and easy :lol:) fontawesome5 icons for all platforms.

Then, another question, i’ve set theme:‘auto’ and when I use npm start for web i think it loads the Material theme ¿thats ok?

Ps: I’ve already readed the docs about vue icons but i can’t find the answer could someone clarify this for me.

Thank you very much!

2 
<!-- F7 Icons font icon -->
<f7-icon f7="home"></f7-icon>

<!-- Material Icons font icon -->
<f7-icon material="home"></f7-icon>

or use another icons, like font-awesome

3

  1. your example does not work i don’t know why see here: https://imgur.com/a/NBap6Yq

  2. Yes, okay but how do I integrate Vue FontAwesome with F7 Vue Markup?
    Because f7icon has slot property and FA does not.

Tell me what do you think.

4

  1. Work fine, may be you miss slot=“media”
    https://jsfiddle.net/Silver775/80k42q1j/

  2. font awesome same component as others f7 components, you confuse slots with props, it’s not the same

5

Nice!

I understand now! Thank you!