Please explain data-icon to me

I’d like to understand how to use the icons properly. On the icons page ( I see this example:

Then use the Font Awesome 5 icons like this:
<button data-icon="empty icon far fa-user-circle">Camera</button>

So I see that fa-user-circle is the name of the icon, but what is “empty icon far” for?

And on this page :

I see this example

<li data-tab="md-tab-iphone" data-icon="empty micons icon-iphone_6" data-selected="true">iPhone 6</li>

Here I don’t see “empty icon far”, but instead I see “empty micons”. What’s the difference and how do I know when to use which one?

Hi Vincent,

The data-icon attribute’s value will be added to the specific component as class attribute. The component will prefix it with the mbsc-ic mbsc-ic- class name this is why you only need to specify only the icon name to the attribute. Of course, this is only will work with the built-in icons.

For external icons the empty string states that it won’t render any built-in icon and you’ll need some css overrides for updating the default mobiscroll icons styles including the font-family in order to use external resources (in the above examples this would be the icon and micons classes).

Other class names are specific to the external icons.

That navigation demo uses an external icon set this is why it uses the micons class is used there. You should check that demo’s css section and the resources should be there in the css folder if you download the demo.

Please let me know if this explains!