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}

<span class="mbsc-font-icon mbsc-icon-home"></span>
<span class="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.

<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.

The full list of the icons you can choose from

IcoMoon

Linecons

Meteocons

FontAwesome

Foundation

Ionicons

Streamline

Material Design Icons