Icon Vue Component

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

Icon Components

There are following components included:

  • f7-icon

Icon Properties

PropTypeDescription
sizenumber
string		Icon size in px
iconstringCustom icon class
f7stringName of F7 Icons font icon
materialstringName of Material Icons font icon
iosstringIcon to be used in case of iOS theme is used. Consists of icon family and icon name divided by colon, e.g. f7:house
mdstringIcon to be used in case of Material theme is used. Consists of icon family and icon name divided by colon, e.g. material:home
aurorastringIcon to be used in case of Aurora theme is used. Consists of icon family and icon name divided by colon, e.g. f7:house
tooltipstringIcon tooltip text to show on icon hover/press

Examples

  1. <!-- Default back icon -->
  2. <f7-icon icon="icon-back"></f7-icon>
  4. <!-- Some custom icon -->
  5. <f7-icon icon="icon-home"></f7-icon>
  7. <!-- F7 Icons font icon -->
  8. <f7-icon f7="house"></f7-icon>
  10. <!-- Material Icons font icon -->
  11. <f7-icon material="home"></f7-icon>
  13. <!-- F7 icons font icon with custom size and color -->
  14. <f7-icon f7="house" size="44px" color="blue"></f7-icon>
  16. <!-- Conditional icon -->
  17. <f7-icon ios="f7:house" aurora="f7:house" md="material:home"></f7-icon>

← Grid / Layout Grid

Inputs / Form Inputs →