Icon with text about nativescript-fonticon

[JoeyHengst]

Hi @ElMohMoh I use the following and the icon is rendered :

<Button text="{{'fa-facebook' | fonticon}} Inloggen Facebook" class="fa btn btn-primary facebookButton" (tap)="loginFacebook()">

I also have a module where I import the TNSFontIconModule like this :

import { NativeScriptModule } from "nativescript-angular/platform";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NgModule } from "@angular/core";
import { TNSFontIconModule, TNSFontIconService } from 'nativescript-ngx-fonticon';
import { LoginComponent } from "./login.component";

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule,
    TNSFontIconModule.forRoot({
            'fa': 'fonts/font-awesome.css'
        })    
  ],
  declarations: [
    LoginComponent
  ]
})
export class LoginModule { }

And then in the component's constructor I do this :

private fonticon: TNSFontIconService,

Only problem I have with this is that my text is cut off

@NathanWalker

[LorenDorez]

@moayadnajd Thanks that seems to work

[LorenDorez]

Hello, this still isnt working. i tried

<Button text="{{'fa-sign-in | fonticon}} Sign In" class="fa btn btn-primary btn-md" tap="signIn" />

[moayadnajd]

hey maybe this syntax will help

<Label class="fa" text="{{ fonticon('fa-home') + 'Home' }}"></Label>

[thearabbit]

don't work for me.

// NativeScript Vue 2
<Label
            class="fa"
            text="{{ fonticon('fa-home') + 'Home' }}"
          ></Label>

Get error

text="{{ fonticon('fa-home') + 'Home' }}": Interpolation inside attributes has been removed

[diezcode]

A little bit late but this is working for Vue:

<Label class="fa">{{'fa-home' | fonticon}} Home</Label>

but I dont know how you can add a Text after the Icon

[thearabbit]

Thanks I will try