CODEWITHSUNDEEP
angularnativescriptfont-awesomenativescript-angular
Justin
Justin

Reputation: 18186

Dynamically render FontAwesome icon in NativeScript view

If I try to render a hard-coded FontAwesome icon in a NativeScript view, like so:

<Label class="fas" text="&#xf015;"></Label>

...then it displays correctly. However, if I try to render a dynamically generated FontAwesome icon instead, by either using text="{{ item.faIcon }}" or [text]="item.faIcon", like so:

private buildMenuItems() {
        this.menuItems = [];
        this.menuItems.push({ title: 'Alerts', faIcon: '&#xf0f3;', url: '/alerts/list' });
        this.menuItems.push({ title: 'Properties', faIcon: '&#xf015;', url: '/properties/list' });
        this.menuItems.push({ title: 'Tenants', faIcon: '&#xf007;', url: '/tenants/list' });
        this.menuItems.push({ title: 'Accounting', faIcon: '&#xf09d;', url: '/accounting/transactions/list' });
        this.menuItems.push({ title: 'Task Management', faIcon: '&#xf00c;', url: '/todos/list' });
        this.menuItems.push({ title: 'Documents', faIcon: '&#xf15c;', url: '/documents/list' });
        this.menuItems.push({ title: 'Reports', faIcon: '&#xf659;', url: '/reports/list' });
        this.menuItems.push({ title: 'Notes', faIcon: '&#xf249;', url: '/notes/list' });
    }

<WrapLayout orientation="horizontal" itemWidth="120" class="menu">
        <StackLayout orientation="vertical" *ngFor="let item of menuItems" (tap)="selectMenuItem(item)">
            <Label class="fas" text="{{ item.faIcon }}"></Label>
            <Label class="fas" [text]="item.faIcon"></Label>
            <Label class="title" [text]="item.title"></Label>
        </StackLayout>
    </WrapLayout>

...then it displays the faIcon characters as text instead of the actual icon. How can I display the actual icons?

enter image description here

Upvotes: 1

Views: 319

Answers (2)

Youssef
Youssef

Reputation: 46

you need to decode the icon Unicode using String.fromCharCode()

view.text = String.fromCharCode(0xf0f3)

Upvotes: 0

Justin
Justin

Reputation: 18186

The answer was to encode the font-awesome icons in the Component.ts:

this.menuItems.push({ title: 'Alerts', faIcon: String.fromCharCode(parseInt('f0f3', 16)), url: '/alerts/list' });

Upvotes: 1

Related Questions