Icon Vue component represents Icon element. It is ready to be used with custom icons, Framework7 Icons, Material Icons, Font Awesome, Ionicons.
<!-- Default back icon -->
<f7-icon icon="icon-back"></f7-icon>
<!-- Some custom icon -->
<f7-icon icon="icon-home"></f7-icon>
<!-- F7 Icons font icon -->
<f7-icon f7="home"></f7-icon>
<!-- Material Icons font icon -->
<f7-icon material="home"></f7-icon>
<!-- Font Awesome icons font icon -->
<f7-icon fa="home"></f7-icon>
<!-- Ionicons icons font icon -->
<f7-icon ion="home"></f7-icon>
<!-- F7 icons font icon with custom size and color -->
<f7-icon f7="home" size="44px" color="blue"></f7-icon>
<!-- Conditional icon -->
<f7-icon if-ios="f7:home" if-material="material:home"></f7-icon>
Renders to:
<!-- Default back icon -->
<i class="icon icon-back"></i>
<!-- Some custom icon -->
<i class="icon icon-home"></i>
<!-- F7 Icons font icon -->
<i class="icon f7-icons">home</i>
<!-- Material Icons font icon -->
<i class="icon material-icons">home</i>
<!-- Font Awesome icons font icon -->
<i class="icon fa fa-home"></i>
<!-- Ionicons icons font icon -->
<f7-icon ion="home"></f7-icon>
<i class="icon ion-home"></i>
<!-- F7 icons font icon with custom size and color -->
<i class="icon f7-icons color-blue" style="font-size:44px">home</i>
<!-- Conditional icon -->
<!-- In case of iOS theme is used/active -->
<i class="icon f7-icons">home</i>
<!-- In case of Material theme is used/active -->
<i class="icon material-icons">home</i>
Prop | Type | Description |
---|---|---|
color | string | Icon color. One of default colors |
size | string/number | Icon size in px |
icon | string | Custom icon class |
f7 | string | Name of F7 Icons font icon |
material | string | Name of Material Icons font icon |
fa | string | Name of Font Awesome font icon |
ion | string | Name of Ionicons font icon |
if-ios | string | Icon to be used in case of iOS theme is used. Consists of icon family and icon name divided by colon, e.g. f7:home or ion:home |
if-material | string | Icon to be used in case of Material theme is used. Consists of icon family and icon name divided by colon, e.g. material:home or fa:home |