NativeScript
diff --git a/‎app/action-bar/action-bar.xml‎
Lines changed: 2 additions & 2 deletions b/‎app/action-bar/action-bar.xml‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎app/app-root/app-root.xml‎
Lines changed: 8 additions & 3 deletions b/‎app/app-root/app-root.xml‎
Lines changed: 8 additions & 3 deletions
diff --git a/‎app/app.js‎
Lines changed: 31 additions & 0 deletions b/‎app/app.js‎
Lines changed: 31 additions & 0 deletions
diff --git a/‎app/pages/buttons.xml‎
Lines changed: 1 addition & 1 deletion b/‎app/pages/buttons.xml‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎app/pages/root.xml‎
Lines changed: 9 additions & 2 deletions b/‎app/pages/root.xml‎
Lines changed: 9 additions & 2 deletions
@@ -1,12 +1,12 @@
-<ActionBar title="{{ title }}" loaded="onLoad" xmlns:ui="nativescript-theme-widgets">
+<ActionBar title="{{ title }}" loaded="onLoad">
     <android>
         <NavigationButton icon="{{ backButton ? 'res://chevron_left' : 'res://menu' }}"
                           tap="{{ backButton ? goBack : toggleSideDrawer }}" />
     </android>
     <ios>
         <NavigationButton visibility="collapsed" />
         <ActionItem position="left" tap="{{ backButton ? goBack : toggleSideDrawer }}">
-            <ui:NTIcon name="{{ backButton ? 'chevron-left' : 'bars' }}"/>
+            <Label name="{{ backButton ? 'chevron-left' : 'bars' | fonticon }}"/>
             <Button class="fa" text="{{ backButton ? '&#xf053; Back' : '&#xf0c9;' }}" />
         </ActionItem>
     </ios>
 
@@ -1,6 +1,5 @@
 <drawer:RadSideDrawer
         xmlns:drawer="nativescript-ui-sidedrawer"
-        xmlns:ui="nativescript-theme-widgets"
         xmlns:themes="pages/themes"
         loaded="onLoaded">
     <drawer:RadSideDrawer.drawerTransition>
@@ -13,8 +12,14 @@
                 <Image src="~/assets/images/N.png" tap="{{ viewHome }}" class="nt-drawer__header-image"/>
                 <Label text="NativeScript Theme Project" textWrap="true" class="nt-drawer__header-brand" />
             </StackLayout>
-            <ui:NTMenu row="1" items="{{ pages }}" selected="{{ selectedPage }}"
-                           itemSelected="{{ onNavigationItemTap }}"/>
+            <ListView row="1" items="{{ pages }}" itemTap="{{ onNavigationItemTap }}">
+                <ListView.itemTemplate>
+                    <StackLayout orientation="horizontal" class="{{ value === $parent.selectedPage ? 'active' : '' }}">
+                        <Label text="{{ icon | fonticon }}" class="fa" />
+                        <Label text="{{ text || value }}" />
+                    </StackLayout>
+                </ListView.itemTemplate>
+            </ListView>
         </GridLayout>
     </drawer:RadSideDrawer.drawerContent>
 
 
@@ -6,6 +6,37 @@ purpose of the file is to pass control to the app’s first module.
 import * as app from "tns-core-modules/application";
 import "nativescript-theme-core";
 
+export function fonticon(value) {
+    if (value) {
+        const scope = app.getRootView()._styleScope;
+
+        if (!scope) {
+            return;
+        }
+
+        const icon = scope._selectors.class[value];
+
+        // eslint-disable-next-line no-unused-expressions
+        icon && icon
+            .flatMap((value) => value.sel.ruleset.declarations)
+            .reverse()
+            .some((dec) => {
+                if (dec.property === "content") {
+                    const char = dec.value.replace(/^"|"$/g, "");
+
+                    value = char.startsWith("\\") ?
+                        String.fromCharCode(`0x${(char.match(/[a-f\d]{2,4}/i) || [])[0]}`) :
+                        char;
+
+                    return true;
+                }
+            });
+    }
+
+    return value;
+}
+
+app.setResources({ fonticon });
 app.run({ moduleName: "app-root/app-root" });
 
 /*
 
@@ -25,7 +25,7 @@
                 <Button text="Button.-primary" class="-primary"/>
                 <Button class="-primary">
                     <FormattedString>
-                        <ui:NTSpanIcon name="twitter"/>
+                        <Span text="{{ 'twitter' | fonticon }}"/>
                         <Span text=" Button.-primary with icon"/>
                     </FormattedString>
                 </Button>
 
@@ -1,7 +1,14 @@
 <Page loaded="onLoad"
-      xmlns:ui="nativescript-theme-widgets"
       xmlns:actionBar="/action-bar">
     <actionBar:action-bar ActionBarTitle="NativeScript Themes" />
 
-    <ui:NTMenu items="{{ somePages }}" selected="{{ selectedPage }}" itemSelected="{{ onNavigationItemTap }}"/>
+    <ListView items="{{ somePages }}" itemTap="{{ onNavigationItemTap }}">
+        <ListView.itemTemplate>
+            <StackLayout orientation="horizontal">
+                <Label text="{{ icon | fonticon }}" class="fa" />
+                <Label text="{{ text || value }}" />
+            </StackLayout>
+        </ListView.itemTemplate>
+    </ListView>
+<!--    <ui:NTMenu items="{{ somePages }}" selected="{{ selectedPage }}" itemSelected="{{ onNavigationItemTap }}"/>-->
 </Page>