How to add button icons to ActionBar in Nativescript?

Question

Hi there people!

I'm trying to add a hamburger menu icon to the ActionBar in my Nativescript app that would trigger a side drawer, but I can't get to add that menu icon.

This is the official documentation on the matter;

And this is my .xml code so far:

<dpg:DrawerPage loaded="pageLoaded" navigatedTo="onNavigatingTo"  
xmlns:dpg="nativescript-telerik-ui/sidedrawer/drawerpage"
xmlns:drawer="nativescript-telerik-ui/sidedrawer"
xmlns:sdc="views/side-drawer-content"
xmlns="http://www.nativescript.org/tns.xsd">
<navigation.actionBar>
  <ActionBar title="Drawer Over Navigation">
    <android>
      <NavigationButton icon="res://ic_menu" tap="toggleDrawer" />
    </android>
    <ios>
      <ActionItem icon="res://ic_menu" ios.position="left" tap="toggleDrawer" />
    </ios>
  </ActionBar>
</navigation.actionBar>

<dpg:DrawerPage.sideDrawer>
<drawer:RadSideDrawer id="drawer">
  <drawer:RadSideDrawer.drawerContent>
    <sdc:side-drawer-content />
  </drawer:RadSideDrawer.drawerContent>
</drawer:RadSideDrawer> 
</dpg:DrawerPage.sideDrawer>

<StackLayout cssClass="mainContent">
    <Label text="{{ exampleText }}" textWrap="true" cssClass="drawerContentText"/>
    <Button text="Toggle Drawer" tap="toggleDrawer" icon="res://ic_menu" />
</StackLayout>
</dpg:DrawerPage>

I think the relevant part is here, but I can't see what could be my mistake.

<ActionBar title="Drawer Over Navigation">
    <android>
      <NavigationButton icon="res://ic_menu" tap="toggleDrawer" />
    </android>
    <ios>
      <ActionItem icon="res://ic_menu" ios.position="left" tap="toggleDrawer" />
    </ios>
</ActionBar>

Please, tell me any additional information I could provide to make this issue clearer.

Answer 1

Option 1.)

The documentation is assuming that you already have the image ic_menu in your resources folders (app/App_Resources/Android/drawables-xxx for Android and app/App_Resources/iOS/Assets.xcassets). Example can be found here

If you do not have this image (scaled for the different devices) then you should provide it. The concept is pretty much the same as you would do for the AppIcons (article here). There are also tools for automatic generation of images with different scales - for example this one here.

Option 2.)

Note: this will work only with the syntax for custom ActionItems

Another applicable option is to create your hamburger menu with IconFonts instead of images (which will have to be resized precisely for the different resolutions)

Example:

1.) Use this instead of image

2.) Import the icon font in folder fonts example here

3.) Create a CSS class

.font-awesome {
    font-family: "FontAwesome";
    font-size: 14;
    font-weight: normal;
    text-align: center;
}

4.) Apply the code for the glyph you want to use (in this case the hamburger menu)

<Button text="&#xf0c9;" class="font-awesome" tap="" />