FontAwesome Icons Not Always Displaying in Nativescript (Vue) App? - vue.js

Question

I am working on an app in Nativescript-vue. The app requires a user to be logged in. When started, the app checks appSettings for whether the user is logged in. If logged in, the user is directed to a menu of choices ("Home"). If user is not logged in, the app loads a login form which validates credentials against a remote DB and then directs the user to the very same menu ("Home").
In both situations, the user is directed to the exact same file, Home.vue. This page consists of 5 or so buttons, each with a FontAwesome icon.
The problem is that the app displays or does not display the icons depending on how the user ends up at the Home.vue menu.
Icons are not displayed when the user is directed on startup to Home.vue (aka appSettings variable shows user is logged in, thus doesn't have to present credentials). Note that drilling further into the app by clicking a button that takes you to another *.vue file that also uses buttons with embedded FontAwesome icons does work.
Icons are displayed correctly when the user is routed to the Home.vue file after presenting valid username / password credentials, both at the Home page and subsequent menus in the app.
MAIN.JS
import Vue from 'nativescript-vue'
// Font Awesome!
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';
TNSFontIcon.debug = true;
TNSFontIcon.paths = {
'fa': './assets/css/fontawesome.min.css',
'far': './assets/css/regular.min.css',
'fas': './assets/css/solid.min.css',
'fab': './assets/css/brands.min.css'
};
TNSFontIcon.loadCss();
Vue.filter('fonticon', fonticon);
import {UserServices} from "./assets/js/UserServices.js"
import Login from "./components/Login.vue";
import Home from "./components/Home.vue"
let user = new UserServices();
new Vue({
render: h => h('Frame', [
h(
(user.getLocalToken()) ? Home : Login
)])
}).$start();
HOME.VUE. (Very stripped down, but still exhibiting the stated behavior)
<template>
<Page class="page" #loaded="loaded">
<StackLayout>
<Button #tap="tapLogoutButton">
<FormattedString>
<Span
class="fas button-icon" stretch="none" :text="'fa-sign-out-alt' | fonticon"
/>
<Span
text=" Logout"
/>
</FormattedString>
</Button>
</StackLayout>
</Page>
</template>
<script>
import Login from "./Login";
import { UserServices } from '../assets/js/UserServices'
let u = new UserServices();
export default {
methods: {
tapLogoutButton(){
if (u.logout()){
this.$navigateTo(Login, {
clearHistory: true
});
};
},
}
};
</script>
Any insight into why the FA icons would appear on a single page (when loaded) depending on how the user ended up there?

Answer 1

You are trying use the plugin your first page before it's ready. loadCss() is an asynchronous function, returns a promise. You must make sure the promise is resolved before using the filter from plugin to render icons.
There are various ways you could solve this
If it's just couple icons in the home / login page, don't use the plugin, directly pass the font code.
you may create an event bus / state, that will hold a boolean value, set it to true upon resolving loadCss() method. Your Home & Login page can rely on the flag, may be with a v-if. It may be few milliseconds for the plugin to process the CSS files.
you may modify the plugin to optionally support synchronous loading,
perhaps even raise a pull request.

Answer 2

I solved this by using the unicode at the text attribute. Binding it to a Vue data.
At the template:
<Label class="fas" :text="file_privacy_police | fonticon"/>
At the <script> tag:
data() {
return {
address_book: "\uf2bb",
file_privacy_police: "\uf570"
};
},
But you can add the unicode directly at the text attribute:
<Label class="fas" :text="'\uf570' | fonticon"/>
This solved my not loading icons problem when already logged in and relaunching the app.