Icon React Component

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

Usage example

<!-- Default back icon -->
<Icon icon="icon-back"></Icon>
 
<!-- Some custom icon -->
<Icon icon="icon-home"></Icon>
 
<!-- F7 Icons font icon -->
<Icon f7="home"></Icon>
 
<!-- Material Icons font icon -->
<Icon material="home"></Icon>
 
<!-- Font Awesome icons font icon -->
<Icon fa="home"></Icon>
 
<!-- Ionicons icons font icon -->
<Icon ion="home"></Icon>
 
<!-- F7 icons font icon with custom size and color -->
<Icon f7="home" size="44px" color="blue"></Icon>
 
<!-- Conditional icon -->
<Icon ifIos="f7:home" ifMaterial="material:home"></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 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 -->
<Icon ion="home"></Icon>
<i class="icon ion-home"></i>
 
<!-- F7 icons font icon with custom size and color -->
<i class="icon Icons color-blue" style="font-size:44px">home</i>
 
<!-- Conditional icon -->
<!-- In case of iOS theme is used/active -->
<i class="icon Icons">home</i>
<!-- In case of Material theme is used/active -->
<i class="icon material-icons">home</i>

Properties

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
ifIos 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
ifMaterial 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