Preload stylesheets from node_modules in Angular

Question

I installed Ionicons (npm install --save [email protected]) in Angular 9 and imported them in my styles.scss file like so:

$ionicons-font-path: "~ionicons/dist/fonts";
@import "~ionicons/dist/scss/ionicons.scss";

Everything works fine, but looking at the lighthouse score, it slows down page load a lot. When I imported a google font in my index.html file, I did the following (preconnect and preload seem to do the same thing, both work):

<link rel="preconnect" as="font" href="https://fonts.googleapis.com/css?family=Work+Sans:400,600&display=swap"
    type="font/eot" crossorigin />

How do I do the same thing with a library imported from node_modules? Thank you in advance.

Answer 1

I think you can move ionicons import path from style.scss to angular.json like below:

"styles": [ "
...,
./node_modules/ionicons/dist/scss/ionicons.scss",
...,
],

When angular serve or build application take care of the rest and load, optimize and minimize for you the scss. So you really don't need rel=preload.

Hope I help you.