SponsorsBecome a sponsor
- Get Started
- Vue Components
- App
- Accordion
- Action Sheet / Actions
- Area Chart
- Autocomplete
- Badge
- Block / Content Block
- Breadcrumbs
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Color Picker
- Contacts List
- Data Table
- Dialog
- Floating Action Button / FAB
- Form Storage
- Gauge
- Grid / Layout Grid
- Icon
- Infinite Scroll
- Inputs / Form Inputs
- Link
- List View
- List Button
- List Index
- List Item
- Login Screen
- Menu List
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull To Refresh
- Radio
- Range Slider
- Searchbar
- Segmented
- Sheet Modal
- Skeleton
- Smart Select
- Sortable
- Stepper
- Subnavbar
- Swipeout
- Swiper
- Tabs
- Text Editor
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Treeview
- View
- Virtual List
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
| Prop | Type | Default | 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 | |
| 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:house | |
| 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 | |
| tooltip | string | Icon tooltip text to show on icon hover/press | |
| tooltip-trigger | string | hover | Defines how to trigger (open) Tooltip. Can be hover, click or manual |
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="house"></f7-icon>
<!-- Material Icons font icon -->
<f7-icon material="home"></f7-icon>
<!-- F7 icons font icon with custom size and color -->
<f7-icon f7="house" size="44px" color="blue"></f7-icon>
<!-- Conditional icon -->
<f7-icon ios="f7:house" md="material:home"></f7-icon>