host roboto font and material icons locally in angular app

local-fonts-icons-angular

//// npm install --save roboto-fontface material-icons

//// put the below stuff into src/styles.scss

// for npm roboto-fontface package (to load local files)
$roboto-font-path: "~roboto-fontface/fonts" !default;
@import "~roboto-fontface/css/roboto/sass/roboto-fontface";

// for npm material-icons package (to load local files)
$material-icons-font-path: '~material-icons/iconfont/';
@import '~material-icons/iconfont/material-icons.scss';

like a charm... thanks :)

very nice

Works great. Thanks

Perfect, thanks a lot!

Works great :)

You are my hero!

Awesome thanks!

Brilliant ! Thanks for that !

Awesome Thank you :)

With a lawyer in my country going nuts right now on referencing Google Fonts remotely (GDPR...) this is exactly what I needed, many thanks.

It worked right out of the box. The only problem was the migration to Sass. It complains ...
imports '~roboto-fontface/css/roboto/sass/roboto-fontface' with a tilde. Usage of '~' in imports is deprecated. but that did not spoil it.

Since Angular & Material v15 I get an error during build process:

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
23 │ @import '~material-icons/iconfont/material-icons.scss';
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/styles.scss 23:9  root stylesheet

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
23 │ @import "~roboto-fontface/css/roboto/sass/roboto-fontface";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/styles.scss 23:9  root stylesheet

Anyone knows how to solve it?

I tried the following suggestion: Add

"stylePreprocessorOptions": {
              "includePaths": [
                "./node_modules"
              ]
            },

in angular.json and remove the ~ from the imports. But this still loads the files from google and also leads to a 404 for the local files

Apparently this isssue is fixed with Angular 15.0.2 again. Did not change the build, but now it works.

Thank you :)