title: Importing materialdesignicons package in ReactJS & Webpack
body: <p>I am trying to add material design icons into my project via the npm "mdi" package. but I have issues.</p>
  
  <p>webpack.config.js</p>
  
  <pre><code>var webpack = require('webpack');
  var path = require('path');
  
  var BUILD_DIR = path.resolve(__dirname, 'src/public');
  var APP_DIR = path.resolve(__dirname, 'src');
  
  var config = {
    entry: [
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080/',
        APP_DIR + '/index.jsx'
    ],
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js',
        publicPath : '/'
    },
    devServer : {
        historyApiFallback: true,
        contentBase: 'src/public/'
    },
    module: {
        loaders : [            
            {
                test : /\.jsx?/,
                include : APP_DIR,
                loader : ['react-hot-loader', 'babel-loader']
            },
            {
                test: /\.s?css$/,
                loaders: ["style-loader", "css-loader", "sass-loader"],
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\??\#?v=[.0-9]+)?$/,
                loader: 'file-loader?name=/fonts/[name].[ext]',
            }
        ]
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ],
    resolve: {
        extensions: ['.js', '.jsx']
    }
  };
  
  //dev server
  
  module.exports = config;
  </code></pre>
  
  <p>my App components calls the main scss file</p>
  
  <pre><code>import './scss/App.scss';
  </code></pre>
  
  <p>then in that App.scss file, I import a settings.scss and the materialdesignicons.scss file</p>
  
  <p>settings.scss</p>
  
  <pre><code>$mdi-font-path: "fonts/";
  </code></pre>
  
  <p>App.scss</p>
  
  <pre><code>@import "./settings.scss";
  @import '~mdi/scss/materialdesignicons.scss';
  </code></pre>
  
  <p>the project is imported via the main.scss file.</p>
  
  <p>settings.scss</p>
  
  <pre><code>$mdi-font-path: "fonts/";
  </code></pre>
  
  <p>whenever I try to build, I get an error with it trying to figure out how to handle the webfont items.</p>
  
  <pre><code>ERROR in ./~/css-loader!./~/sass-loader!./src/scss/App.scss
  Module not found: Error: Can't resolve './fonts//materialdesignicons-webfont.eot?v=1.9.32' in '/&lt;path&gt;/app/src/scss'
   @ ./~/css-loader!./~/sass-loader!./src/scss/App.scss 7:129-189
   @ ./src/scss/App.scss
   @ ./src/App.jsx
   @ ./src/index.jsx
   @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080/ ./src/index.jsx
  </code></pre>
  
  <p>I thought that the file-loader would handle those files. It seems that maybe since it's importing the scss file, it doesn't use the file loader part, and instead tries to use the sass/css loaders.</p>
  
  <p>I'm trying to figure out how this should be done.</p>