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?