Icons
Some of the components are using icons to enhance the user interface, providing an API to easily specify which icons to use.
It is also possible to use the icons outside of Mobiscroll components using the provided css classes: mbsc-font-icon mbsc-icon-{icon_name}
Example
<span className="mbsc-font-icon mbsc-icon-home"></span>
<span className="mbsc-font-icon mbsc-icon-pencil"></span>
The downloaded Mobiscroll package contains a default icon set containing some frequently used icons and the icons used in our demos and examples.
The download builder provides the possibility to create custom icon packs, which can be selected to include in the downloaded package instead of the default set.
Use Mobiscroll icons in Ionic components
The Mobiscroll icon sets can be used inside Ionic components as well. The usage is similar as you use the icons outside Mobiscroll components. Just add the mbsc-font-icon mbsc-icon-{icon_name}
css classes to the ion-icon
component and leave it's name
attribute out.
Example
<ion-icon class="mbsc-font-icon mbsc-icon-pencil"></ion-icon>
Use external icons in Mobiscroll components
If your project or framework already uses an icon set you can easily use those icons in the Mobiscroll components. There are built in options to pass svg directly as an option such as the iconSvg option in case of the Button compoenent.
Default icon set
The following icons are included in the trial, npm packages, and in the downloaded packages, if no custom icon set is selected.
ion-android-system-windows
ion-ios7-information-outline
material-brightness-medium
material-format-list-numbered
material-format-underline
material-keyboard-arrow-down
material-keyboard-arrow-left
material-keyboard-arrow-right
material-keyboard-arrow-up
material-vertical-align-bottom
material-photo-size-select-large
The full list of the icons you can choose from
IcoMoon
Linecons
Meteocons
FontAwesome
fa-american-sign-language-interpreting
fa-assistive-listening-systems
Foundation
foundation-arrows-compress
foundation-background-color
foundation-bitcoin-circle
foundation-clipboard-notes
foundation-clipboard-pencil
foundation-closed-caption
foundation-graph-horizontal
foundation-list-thumbnails
foundation-magnifying-glass
foundation-page-export-csv
foundation-page-export-doc
foundation-page-export-pdf
foundation-pricetag-multiple
foundation-projection-screen
foundation-results-demographics
foundation-social-android
foundation-social-behance
foundation-social-blogger
foundation-social-delicious
foundation-social-designer-news
foundation-social-deviant-art
foundation-social-dribbble
foundation-social-dropbox
foundation-social-evernote
foundation-social-facebook
foundation-social-foursquare
foundation-social-game-center
foundation-social-google-plus
foundation-social-hacker-news
foundation-social-instagram
foundation-social-linkedin
foundation-social-myspace
foundation-social-pinterest
foundation-social-skillshare
foundation-social-smashing-mag
foundation-social-snapchat
foundation-social-spotify
foundation-social-squidoo
foundation-social-stack-overflow
foundation-social-stumbleupon
foundation-social-treehouse
foundation-social-windows
foundation-social-youtube
foundation-tablet-landscape
foundation-tablet-portrait
foundation-telephone-accessible
foundation-torso-business
foundation-torsos-all-female
foundation-torsos-female-male
foundation-torsos-male-female
foundation-universal-access
Ionicons
ion-android-arrow-down-left
ion-android-arrow-down-right
ion-android-arrow-up-left
ion-android-arrow-up-right
ion-android-system-windows
ion-arrow-graph-down-left
ion-arrow-graph-down-right
ion-icon-social-google-plus
ion-icon-social-google-plus-outline
ion-ios7-arrow-thin-right
ion-ios7-bookmarks-outline
ion-ios7-briefcase-outline
ion-ios7-browsers-outline
ion-ios7-calculator-outline
ion-ios7-calendar-outline
ion-ios7-chatboxes-outline
ion-ios7-chatbubble-outline
ion-ios7-checkmark-outline
ion-ios7-cloud-download-outline
ion-ios7-cloud-upload-outline
ion-ios7-cloudy-night-outline
ion-ios7-download-outline
ion-ios7-fastforward-outline
ion-ios7-infinite-outline
ion-ios7-information-empty
ion-ios7-information-outline
ion-ios7-lightbulb-outline
ion-ios7-location-outline
ion-ios7-navigate-outline
ion-ios7-paperplane-outline
ion-ios7-partlysunny-outline
ion-ios7-personadd-outline
ion-ios7-pricetag-outline
ion-ios7-recording-outline
ion-ios7-skipbackward-outline
ion-ios7-skipforward-outline
ion-ios7-speedometer-outline
ion-ios7-stopwatch-outline
ion-ios7-telephone-outline
ion-ios7-thunderstorm-outline
ion-ios7-unlocked-outline
ion-ios7-videocam-outline
ion-ios7-wineglass-outline
ion-social-android-outline
ion-social-bitcoin-outline
ion-social-buffer-outline
ion-social-designernews-outline
ion-social-dribbble-outline
ion-social-dropbox-outline
ion-social-facebook-outline
ion-social-github-outline
ion-social-googleplus-outline
ion-social-hackernews-outline
ion-social-linkedin-outline
ion-social-pinterest-outline
ion-social-reddit-outline
ion-social-tumblr-outline
ion-social-windows-outline
ion-social-wordpress-outline
ion-social-youtube-outline
Streamline
stream-barista-coffee-espresso
stream-caddie-shop-shopping
stream-camera-photo-polaroid
stream-chef-food-restaurant
stream-computer-macintosh-vintage
stream-danger-death-delete-destroy-skull
stream-design-graphic-tablet-tablet
stream-design-pencil-rule
stream-diving-leisure-sea-sport
stream-drug-medecine-syringue
stream-eat-food-fork-knife
stream-factory-lift-warehouse
stream-first-aid-medecine-shield
Material Design Icons
material-account-balance-wallet
material-add-circle-outline
material-add-shopping-cart
material-airplanemode-off
material-arrow-drop-down-circle
material-assignment-return
material-assignment-returned
material-assignment-turned-in
material-battery-charging-full
material-bluetooth-connected
material-bluetooth-disabled
material-bluetooth-searching
material-bookmark-outline
material-border-horizontal
material-brightness-medium
material-call-missed-outgoing
material-center-focus-strong
material-center-focus-weak
material-chat-bubble-outline
material-check-box-outline-blank
material-collections-bookmark
material-control-point-duplicate
material-create-new-folder
material-directions-ferry
material-directions-railway
material-directions-subway
material-directions-train
material-directions-transit
material-dnd-forwardslash
material-exposure-minus-1
material-exposure-minus-2
material-favorite-outline
material-fiber-manual-record
material-fiber-smart-record
material-filter-center-focus
material-filter-tilt-shift
material-format-align-center
material-format-align-justify
material-format-align-left
material-format-align-right
material-format-color-fill
material-format-color-reset
material-format-color-text
material-format-indent-decrease
material-format-indent-increase
material-format-line-spacing
material-format-list-bulleted
material-format-list-numbered
material-format-strikethrough
material-format-textdirection-l-to-r
material-format-textdirection-r-to-l
material-format-underline
material-highlight-remove
material-image-aspect-ratio
material-important-devices
material-indeterminate-check-box
material-insert-drive-file
material-insert-invitation
material-invert-colors-off
material-invert-colors-on
material-keyboard-arrow-down
material-keyboard-arrow-left
material-keyboard-arrow-right
material-keyboard-arrow-up
material-keyboard-backspace
material-keyboard-capslock
material-keyboard-control
material-laptop-chromebook
material-lightbulb-outline
material-local-attraction
material-local-convenience-store
material-local-gas-station
material-local-grocery-store
material-local-laundry-service
material-local-post-office
material-local-print-shop
material-local-restaurant
material-location-disabled
material-location-history
material-location-searching
material-markunread-mailbox
material-monochrome-photos
material-multitrack-audio
material-my-library-books
material-notifications-none
material-notifications-off
material-notifications-on
material-notifications-paused
material-panorama-fisheye
material-panorama-horizontal
material-panorama-vertical
material-panorama-wide-angle
material-pause-circle-fill
material-pause-circle-outline
material-perm-contact-cal
material-perm-data-setting
material-perm-device-info
material-person-pin-circle
material-phone-bluetooth-speaker
material-photo-size-select-actual
material-photo-size-select-large
material-photo-size-select-small
material-picture-in-picture
material-picture-in-picture-alt
material-play-circle-fill
material-play-circle-outline
material-playlist-add-check
material-play-shopping-bag
material-portable-wifi-off
material-power-settings-new
material-quick-contacts-dialer
material-quick-contacts-mail
material-radio-button-off
material-record-voice-over
material-remove-circle-outline
material-remove-from-queue
material-rotate-90-degrees-ccw
material-screen-lock-landscape
material-screen-lock-portrait
material-screen-lock-rotation
material-settings-applications
material-settings-backup-restore
material-settings-bluetooth
material-settings-brightness
material-settings-display
material-settings-ethernet
material-settings-input-antenna
material-settings-input-component
material-settings-input-composite
material-settings-input-hdmi
material-settings-input-svideo
material-settings-overscan
material-settings-system-daydream
material-signal-cellular-4-bar
material-signal-cellular-connected-no-internet-4-bar
material-signal-cellular-no-sim
material-signal-cellular-null
material-signal-cellular-off
material-signal-wifi-4-bar
material-signal-wifi-4-bar-lock
material-signal-wifi-statusbar-connected-no-internet
material-signal-wifi-statusbar-not-connected
material-signal-wifi-statusbar-null
material-slow-motion-video
material-stay-current-landscape
material-stay-current-portrait
material-stay-primary-landscape
material-stay-primary-portrait
material-stop-screen-share
material-store-mall-directory
material-subdirectory-arrow-left
material-subdirectory-arrow-right
material-supervisor-account
material-swap-vert-circle
material-system-update-tv
material-trending-neutral
material-vertical-align-bottom
material-vertical-align-center
material-vertical-align-top
material-video-collection
material-wallet-membership
material-youtube-searched-for