How to use custom navigation icon in the ActionBar? NS Vue

plugins
#1

I used nativescript-fonticon and nativescript-material-icon plugin and i tried with this code, but there’s no result tht i expected:

<action-bar title="myApp" :class=" searchBtn ? 'searchAction' : ''">
         <navigation-button style="color: white; font-size:15;" v-show="searchBtn" @tap="searchBtn = false"  :text="'mdi-menu' | fonticon"></navigation-button>
</action-bar>
#2

@fidellr
Let’s say you want to add a “white back arrow” as your navigation button,

first goto

and download the 24_dp variant png images of the icon.

next place it in your app_resources folders (all the different sizes you need for both android and ios are already provided)

now using it in your view is as simple as

<navigation-button icon="res://ic_arrow_back_white_24dp" tap="onNavBtnTap" @tap="onGoBack"  :text="'Go Back"></navigation-button>

Not sure if I wrote the correct syntax for using icon attribute in vue.

Let me know if this works for you :slight_smile:
cheers!

(
if someone in future wants equivalent NS Code code, then here it is

<NavigationButton text="Go Back" icon="res://ic_arrow_back_white_24dp" tap="onNavBtnTap"/>

)

#3

@multishiv19 thanks for ur response, should i place the icon that i’ve got from google-mdi website inside all of the app/App_resources/drawable-{hdpi, ldpi, mdpi, nodpi, xhdpi, xxhdpi, xxxhdpi} folders?

#4

@fidellr
just copy the android folder you got, and paste it into the android folder in your app_resource, it will ask you if it can merge the two folders, just say yes.
so all folders will now have the icon you need. in the correct size.

Same for ios folder