Icon Vue Component

Icon Vue Component

Icon Components
Icon Properties
Examples

Icon Vue component represents Icon element. It is ready to be used with custom icons, Framework7 Icons, Material Icons, Font Awesome, Ionicons.

Icon Components

There are following components included:

**f7-icon**

Icon Properties

Prop	Type	Description
size	number string	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
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`
md	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`
aurora	string	Icon to be used in case of Aurora theme is used. Consists of icon family and icon name divided by colon, e.g. `f7:home` or `ion:home`
tooltip	string	Icon tooltip text to show on icon hover/press

Examples

<!-- 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 ios="f7:home" aurora="f7:home" md="material:home"></f7-icon>