Icon size server side rendering universal

[dottodot]

When using universal for ssr the page loads the icons full size until the browser takes over, the reason for this is the inline styles are missing from the the universal app.

I'm not entirely sure why this is but it should be possible to include them as other modules such as material do.

[devoto13]

It has the same root cause as #18 - FA inserts styles using custom JS, so Angular server side rendering is not aware about them. Until it is fixed you can include style.css from @fortawesome/fontawesome-svg-core package in your global styles to workaround the issue.

[FelipeMicali]

I've tried copying all styles from @fortawesome/fontawesome-svg-core in a .scss file that is served inline in my main component, like this:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.scss']
})
export class AppComponent {

and in app.scss:
@import 'font-awesome-styles';

All styles are pre-rendered and served inline, but the initial icons are stil being rendered in full size...

Did anyone could solve this problem?

Thanks!

[devoto13]

@FelipeMicali When you include styles this way they are subject to component's view encapsulation and therefore will work only for elements defined in the template of AppComponent. Please include styles globally as described in this story.

[FelipeMicali]

@devoto13 yes, I've noticed the component's view encapsulation behavior and to solve it I've included all those styles inline in my maind Angular index.html. But I'm going to take a look at the link you provided and implement this method to make my application more functional.

Thanks!

[santekotturi]

I've included the styles in angular.json build.options.styles but I'm still getting massive icons when using Angular Universal until the server => client transfer occurs.

 "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "node_modules/@fortawesome/fontawesome-svg-core/styles.css",
              "src/styles.scss"
            ],
          },

in app.module.ts I've tried turning config.autoAddCss to true or false without any result.

import { config } from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false;

[devoto13]

@skotturi This is strange. Do you have a repro I can take a look at?

Also as a diagnostic step: can you open Network tab in your browser's Dev Tools and make sure that the server rendered page includes the necessary styles by searching for .fa-layers in the returned content for example?

[peterpeterparker]

thx @devoto13 adding the style.css as workaround seems to work for my website

        "styles": [
          "node_modules/@fortawesome/fontawesome-svg-core/styles.css",
          "src/styles.scss"
        ]

[helgetan]

does anyone have a solution for the problem other than the workaround?

[Mohendran]

Adding the key-value => "extractCss": true in build.options will fix this issue.

[MarcoGlauser]

Instead of importing the whole fa-icons into the global css, we added just the following rules to the global (s)css.

fa-icon svg {
  display: inline-block;
  font-size: inherit;
  height: 1em;
}
fa-icon .fa-2x{
  height: 2em;
}

This fixes the basic sizing issues for our use case.
The rules will be overwritten once the complete style is loaded from js, and shouldn't have too much impact. But your mileage might vary.

Beware, this is a workaround and might stop working in the future.

[abuMiguel]

Update to MarcoGlauser's workaround, I had to do this:

.svg-inline--fa {
  vertical-align: -0.125em;
}

fa-icon svg {
  display: inline-block;
  font-size: inherit;
  height: 1em;
}

fa-icon .fa-2x{
  font-size: 2em;
}