Rock Mobile Docs

Icon

Inherits from Xamarin.Forms.Label

We're used to having sleek icons on our web pages, and your mobile app should be no exception. Add icons from various libraries, ensuring your pages look polished and visually appealing.

Icon Family

Rock Mobile currently supports the following font families:

Font FamilyInternal Font NameDescription
FontAwesome (default)N/AAutomatically pick the first Font Awesome family that supports the requested icon in order of Regular, Solid and then Brands.
FontAwesomeSolidFontAwesome5Free-SolidThe solid icons from Font Awesome free v5.11: link
FontAwesomeRegularFontAwesome5Free-RegularThe regular icons from Font Awesome free v5.11: link
FontAwesomeBrandsFontAwesome5Brands-RegularThe brand icons from Font Awesome free v5.11: link
MaterialDesignIconsMaterialDesignIconsMany of the Material Design icons: link
TablerIconsTablerIconsThe outline variant icons from Tabler: link

Properties

PropertyTypeDescription
IconClassstringThe icon class name to use. This can be found on the FontAwesome website. If it specified fas fa-car then you would use car.
IconFamilyIconFamilyThe icon font family to use to display the icon. Default value is FontAwesome.
FontSizedoubleThe size of the icon.
TextColorColorThe color of the icon to use by default.
CommandICommandThe command to be executed when the user taps on the icon.
CommandParameterobjectThe object to be passed as the parameter to Command.

Note

Use the Font Family name when defining the IconFamily property with Rock:Icon. The Internal Font Name can be used to add an icon as an image within a Button.  

<HorizontalStackLayout Spacing="8">
    <Rock:Icon IconFamily="TablerIcons" IconClass="user" />
    <Rock:Icon IconFamily="FontAwesomeSolid" IconClass="user" />
    <Rock:Icon IconFamily="FontAwesomeBrands" IconClass="RockRMS" />
    <Rock:Icon IconFamily="FontAwesomeRegular" IconClass="user" />
    <Rock:Icon IconFamily="MaterialDesignIcons" IconClass="account" />
</HorizontalStackLayout>


<Button Text="Save"
    StyleClass="btn, btn-primary, headline, font-weight-bold"
    ContentLayout="Left, 12">
    <Button.ImageSource>
        <FontImageSource Glyph="&#xeb62;" FontFamily="TablerIcons" Size="20" />
    </Button.ImageSource>
</Button>