angular6 - ngx-editor icons do not appear on production

Question

I am developing an angular6 app. I am using ngx-editor.

The editor seems to work fine in localhost, but when I deploy it in firebase the icons don't appear at all.

What could be the reason? Please let me know if you need any more details.

TIA.

Answer 1

Most likely Font-Awesome style sheet is not getting deployed to the server. If you embed the following css in your component's CSS

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

And set the encapsulation to ViewEncapsulation.None in your @component decorator of .ts file, the icons should appear

encapsulation: ViewEncapsulation.None

Answer 2

This can be resolved by:

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/angular-fontawesome

Make sure you have the appropriate angular-fontawesome for your angular version add/edit the following files:

angular-editor.module.ts

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

angular-editor.component.ts

import {FaIconLibrary, FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import {far} from '@fortawesome/free-regular-svg-icons';
import {fas} from '@fortawesome/free-solid-svg-icons';

constructor(
   library: FaIconLibrary,
) {
  library.addIconPacks(fas, far);
}

angular-editor-toolbar.component.ts edit all icon tags.

to

<fa-icon [icon]="['fas', 'icon-name']" >