CODEWITHSUNDEEP
node.jsfontsnpmsass
Brandon Parker
Brandon Parker

Reputation: 803

Google Material Design Icon Font with NPM and Gulp

I am trying to import the Google Material Design Icon Font into my project. I have installed the NPM package

npm install material-design-icons --save-dev

It exists, but I can't figure out how to get it to be included in my SCSS files. I've tried importing several different ways and they all fail. I've also tried referencing the font files from within node_modules and that also doesn't work. There has to be a way to include or import this font into SCSS.

Upvotes: 4

Views: 2924

Answers (1)

Brandon Parker
Brandon Parker

Reputation: 803

I solved this issue. I ended up creating another task to run before the font task that moves my font files from my source to distribution folder. Here's the code, since it might be helpful. Note that I'm using the Gulp Starter kit as a base.

var config      = require('../config');
if(!config.tasks.fonts) return;

var changed     = require('gulp-changed'),
    gulp        = require('gulp'),
    path        = require('path');

gulp.task('googleFont', function () {
    return gulp.src([paths.iconsrc, '*!README.md'])
      .pipe(changed(paths.dest))
      .pipe(gulp.dest(paths.dest))
});

Similar to the standard font task, this will go directly to the Google Material Design Icon font folder at ./node_modules/material-design-icons/iconfont and then if they are different from the last deployment will copy them into my distribution folder. This means it will also support updates from Google, as they happen.

Upvotes: 2

Related Questions