is this for use with google material icons?

[ee7klt]

https://design.google.com/icons/?

i received the error: ERROR in (webpack)-material-design-icons/material-design-icons.css Module parse failed: /home/ee7klt/Code/elite-job-posting/node_modules/webpack-material-design-icons/material-design-icons.css Unexpected character '@' (4:0) You may need an appropriate loader to handle this file type.

i have included the loader and vendor as per the README in my webpack.config

[palavrov]

Yes, it is. Unfortunately there is no way to modify the webpack configuration with required node module. You need to handle manually the CSS files in your webpack.config, for example like this:

module.exports = {
 //   ...
    module: {
        loaders: [
 //   ...
        { test: /\.css$/, loader: ExtractTextPlugin.extract("style", "css") }
 //   ...
        ]
    }
 //   ...
}

These days will add a real example how to use it. If you are experienced with webpack it is just adding this module as dependency and voila.

[ee7klt]

yes, i am using style-loader and css-loader (although i'm not using extractextplugin because i need hmre). will this not work?

loaders: [ { test: /\.css$/, loaders: ['style', 'css'], include: PATHS.app },

[palavrov]

Hmmm ... need to check how it will work without extracttext. For me it works very well and creates a separate vendors.css & vendors.css.map in which it packs all the third party CSS files. But the webpack.config a is bit complicated, so I didn't put it as example here. But anyway here it is - may be it will help you:

var path = require("path");
var webpack = require("webpack");
var merge = require("webpack-merge");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CleanPlugin = require('clean-webpack-plugin');

var PATH = {
    WWW: path.resolve(__dirname, "web"),
    BUILD: path.resolve(__dirname, "build")
};

var common = {
    resolve: {
        extensions: ["", ".js"],
        modulesDirectories: [
            "node_modules",
            PATH.WWW,
            path.resolve(PATH.WWW, "css"),
            path.resolve(PATH.WWW, "images")
        ]
    },
    entry: {
        app: [
            "style.css",
            path.resolve(PATH.WWW, "index.js")
        ],
        vendors: [
            "es5-shim",
            "jquery",
            "webpack-material-design-icons",
            "webpack-md-messagebox",
            "webpack-md-coverbox",
            "angular-ui-router",
            "angular-material-data-table",
            "angular-material-data-table/dist/md-data-table.min.css",
            "angular-input-modified",
            "feathers-client",
            "socket.io-client"
        ]
    },
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "[name].js",
        chunkFilename: "[name].js"
    },
    module: {
        loaders: [
        { test: /\.css$/, loader: ExtractTextPlugin.extract("style", "css") },
        { test: /\.json$/, loader: "json" },
        { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },
        { test: require.resolve("feathers-client"), loader: "expose?feathers" },
        { test: require.resolve("socket.io-client"), loader: "expose?io" }
        ]
    },
    plugins: [
        new CleanPlugin([path.resolve(__dirname, "build")]),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            names: ["vendors", "manifest"]
        })
    ]
};

var debug = {
    module: {
        loaders: [
        {
            test: /\.html$/,
            loader: "ngtemplate?module=Dashboard&relativeTo="+path.resolve(__dirname, "web")+"/!html",
            exclude: path.resolve(__dirname, "web/index.html")
        },
        { test: /\.(jpe?g|png|gif|svg|eot|woff|ttf|svg|woff2)$/, loader: "file?name=[name].[ext]" }
        ]
    },
    devtool: 'source-map',
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(PATH.WWW, "index.html")
        }),

        new  ExtractTextPlugin("[name].css")
    ]
};

var release = {
    output: {
        filename: "[name].[chunkhash].js",
        chunkFilename: "[name].[chunkhash].js"
    },
    module: {
        loaders: [
        {
            test: /\.html$/,
            loader: "ngtemplate?module=Dashboard&relativeTo="+path.resolve(__dirname, "web")+"/!html!html-minify",
            exclude: path.resolve(__dirname, "web/index.html")
        },
        { test: /\.(jpe?g|png|gif|svg|eot|woff|ttf|svg|woff2)$/, loader: "file?name=[name].[hash].[ext]" }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),

        new HtmlWebpackPlugin({
            template: path.resolve(PATH.WWW, "index.html"),
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true
            }
        }),

        new  ExtractTextPlugin("[name].[chunkhash].css", { allChunks: true } )
    ]
};

var TARGET = process.env.npm_lifecycle_event;

if (!TARGET || TARGET==="start") {
    module.exports = merge(common, debug);
}

if (TARGET==="build:webpack") {
    module.exports = merge(common, release);
}

With that setup the it embeds material-design-icons.css in vendors.css and then injects vendors.css in index.html template so I don't need to do it manually.

Here is the template:

<!doctype html>
<html lang="en" ng-app="Dashboard" ng-controller="MasterCtrl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

<title ng-bind-template="{{data.systemInfo.systemType}} by TTK">TTK - Connecting ...</title>

</head>
<body ng-cloak layout="row" layout-align="start stretch">

    <md-sidenav class="md-ttkSidebar-theme md-sidenav-left md-whiteframe-z3 ttk-sidebar"
                md-theme="ttkSidebar"
                md-is-locked-open="true"
                ui-view="sidebar">
    </md-sidenav>

    <md-content layout="column"
                layout-align="start stretch"
                flex>
        <md-toolbar class="md-whiteframe-z3 ttk-header"
                    md-theme="ttkHeader"
                    ui-view="header">
        </md-toolbar>
        <md-content layout="column"
                    layout-margin
                    layout-align="start stretch"
                    flex
                    class="ttk-content"
                    md-theme="ttkContent"
                    ui-view="content">
        </md-content>
    </md-content>

</body>
</html>

And this is the end result:

<!doctype html>
<html lang="en" ng-app="Dashboard" ng-controller="MasterCtrl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

<title ng-bind-template="{{data.systemInfo.systemType}} by TTK">TTK - Connecting ...</title>

<link href="vendors.css" rel="stylesheet"><link href="app.css" rel="stylesheet"></head>
<body ng-cloak layout="row" layout-align="start stretch">

    <md-sidenav class="md-ttkSidebar-theme md-sidenav-left md-whiteframe-z3 ttk-sidebar"
                md-theme="ttkSidebar"
                md-is-locked-open="true"
                ui-view="sidebar">
    </md-sidenav>

    <md-content layout="column"
                layout-align="start stretch"
                flex>
        <md-toolbar class="md-whiteframe-z3 ttk-header"
                    md-theme="ttkHeader"
                    ui-view="header">
        </md-toolbar>
        <md-content layout="column"
                    layout-margin
                    layout-align="start stretch"
                    flex
                    class="ttk-content"
                    md-theme="ttkContent"
                    ui-view="content">
        </md-content>
    </md-content>

<script src="manifest.js"></script><script src="vendors.js"></script><script src="app.js"></script></body>
</html>

The problem is that these days I totally lack any free time to prepare a proper example in this repo.