Cannot load MDI icons after Grunt build

Question

I've installed LumX via bower and am running on Yeoman angular-generator with grunt.

When running on the development after grunt build, all the icons show up correctly. When I run grunt build and serve the dist/ folder, all the icons sources throw an error via GET: /styles/fonts/ANY OF THE FONT FILE INCLUDED?v=1.2.64

I understand everything works on localhost, but can't seem to pinpoint why it keeps referencing that.

I figured that's what the problem is since grunt minifies, but it loads beautifully in development.

Any explanation and solution would be appreciated!

Thanks!

Answer 1

After tinkering around, I found that it was because how Grunt minifies that throws the MaterialDesignIcons off. Since the icon package has a source expecting to find their fonts in a specific path ../style/fonts/* , it won't be the same after a Grunt build since they get minified into a single file.

I took the FontAwesome approach to the Grunt file.

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= config.app %>',
      dest: '<%= config.dist %>',
    src: [
      '.{ico,png,txt}',
      '.htaccess',
      'images/{,/}.webp',
      '{,/}.html',
      'styles/fonts/{,/}.'
      ]
     },{
   expand: true,
   dot: true,
   cwd: 'bower_components/mdi/fonts/',
   src: ['.'],
   dest: '<%= yeoman.dist %>/styles/fonts'
  }]
 }
}