I've been trying for hours and have no success when importing material design iconic fonts using webpack.

My webpack.config.js

...
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                {loader: "style-loader"},
                {loader: "css-loader"}
            ]
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {}
                }
            ]
        },
        {
            test: /\.(svg|eot|woff|ttf|svg|woff2)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: "fonts/[name].[ext]"
                    }
                }
            ]
        }
    ]
...

My app.js file

import 'material-design-iconic-font/dist/css/material-design-iconic-font.css';

my webpack output console

Built at: 2018-4-3 12:48:40
                                  Asset      Size  Chunks             Chunk Names
fonts/Material-Design-Iconic-Font.ttf  96.9 KiB          [emitted]  
fonts/Material-Design-Iconic-Font.woff2  37.5 KiB          [emitted]  
fonts/Material-Design-Iconic-Font.woff  49.1 KiB          [emitted]  
4a37f8008959c75f619bf0a3a4e2d7a2.png  4.86 KiB          [emitted] 

But I'm not getting any icon when setting

<i class='zmdi zmdi-money'></i>

Please, cold anyone help me? Thanks.

I've been trying for hours and have no success when importing material design iconic fonts using webpack.

My webpack.config.js

...
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                {loader: "style-loader"},
                {loader: "css-loader"}
            ]
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {}
                }
            ]
        },
        {
            test: /\.(svg|eot|woff|ttf|svg|woff2)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: "fonts/[name].[ext]"
                    }
                }
            ]
        }
    ]
...

My app.js file

import 'material-design-iconic-font/dist/css/material-design-iconic-font.css';

my webpack output console

Built at: 2018-4-3 12:48:40
                                  Asset      Size  Chunks             Chunk Names
fonts/Material-Design-Iconic-Font.ttf  96.9 KiB          [emitted]  
fonts/Material-Design-Iconic-Font.woff2  37.5 KiB          [emitted]  
fonts/Material-Design-Iconic-Font.woff  49.1 KiB          [emitted]  
4a37f8008959c75f619bf0a3a4e2d7a2.png  4.86 KiB          [emitted] 

But I'm not getting any icon when setting

<i class='zmdi zmdi-money'></i>

Please, cold anyone help me? Thanks.

• javascript
• material-design
• webpack-file-loader

• I don't have the answer, but maybe you can try material-icons – Megidd Commented Apr 3, 2018 at 16:11

1 Answer 1

Inspecting carefully in the added material design inline-style I noticed the following statement:

url("fonts/Material-Design-Iconic-Font.woff2") 

That's why it didn't work. The js file importing the icons was placed on js folder (appname/js) and when executing the page itself, the browser was attempting to get localhost:8080/appname/fonts/Material-Design-Iconic-Font.woff2. what didn't exist at all. (Once fonts page is created inside js folder "appname/js/fonts...")

To solve the problem, I changed the webpack.config.js file to

{
    test: /\.(svg|eot|woff|ttf|svg|woff2)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: "[path][name].[ext]"
            }
        }
    ]
}

and now inspecting the result inline-style, I get

url(node_modules/material-design-iconic-font/dist/fonts/Material-Design-Iconic-Font.woff2)

Now the browser is able to load it and the icon is showing correctly.