nativescript-angular: icon font codes in TabView *tabItem directives don't work

There is what I want to accomplish :

<TabView selectedIndex="1">
  <StackLayout *tabItem="{title: '&#xf030;'}" class="fa">
    <Label text="This is Label in Tab 1  &#xf030;"></Label>
  </StackLayout>
  <StackLayout *tabItem="{title: '&#xf030;'}" class="fa">
    <Label text="This is Label in Tab 1  &#xf030;"></Label>
  </StackLayout>
</TabView>

Here, the font-awesome icon code shows correctly in the Label block but in the tab it doesn’t. It could be really useful to have that working 😃

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 15 (2 by maintainers)

Most upvoted comments

I saw this issue is fixed for the plain {N} in #4302, where you can target directly the TabView Item. In Angular the template structor is completely different so I think there should be a fix for the Angular version, too. This issue should be reopened or a new one created.

bozhidarc on Oct 8, 2017

Please open!

sivsushruth on Sep 28, 2016

Has anyone managed to add a font awesome icon to a TabBar on NativeScript-Vue yet?

I can’t believe that a framework that puts itself as a sophisticated mobile development tool hasn’t come up with a solution for such a ridiculously simple and obvious feature. The proposed workaround - using images through iconSource - is painfully laborious due to the whole image resizing drama.

patrickcneuhaus on Nov 1, 2019

Please solve the font-size issue of tabs view item its to late

MuhammadTahir92 on Jan 2, 2018

I’m using nativescript-ng2-fonticon and I can use the icons directly in the tabs like this

<TabView #tabview [selectedIndex]="tabindex" class="mdi">
    <StackLayout *tabItem="{title: '&#xE87D; Favorites' }" orientation="vertical">
    </StackLayout>
</TabView>

dgomezs on Feb 8, 2017