image

`<img ng-if="device.icon != undefined" src="{{ device.icon }}" width="60px;">`

font-awesome

Notice I use class="ng-cloak"

`<span class="ng-cloak" ng-if="device.icon == undefined">
    <i class="fa fa-fw fa-lg" ng-class="device.status.deviceType.icon"></i>
</span>`

With these style

<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
</style>

Right now, it shows my icon font-awesome still showing very quickly when loading.

How do I prevent this from happening ?

Solution

ngCloak only prevents the element from showing in it's un-compiled (by AngularJS) form. The reason it's showing briefly is because of your ngIf statement and because, breifly, device.icon is undefined (i'm assuming it's waiting on an AJAX response).

If you don't want the icon to appear at all, ever, then just don't include that tag. Otherwise, you will need another variable to determine when to show the icon that is not based on the undefined status, but rather on the status of the AJAX call that fetches the device info. Something like this:

<span class="ng-cloak" ng-if="ajaxFinished && device.icon == undefined"> <i class="fa fa-fw fa-lg" ng-class="device.status.deviceType.icon"></i> </span>