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';

Thank you :)

As of today with angular 19 and Dart Sass 1.80.0 the @import keyword is deprecated. Here is what I had to do for it to work. Hope this helps :

// for npm roboto-fontface package (to load local files)
@use 'roboto-fontface/css/roboto/sass/roboto-fontface' with (
  $roboto-font-path: 'roboto-fontface/fonts'
);

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