Icon React component represents Icon element. It is ready to be used with custom icons, Framework7 Icons, Material Icons, Font Awesome, Ionicons.
<!-- 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>
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 |