2

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>

enter image description here

Please, cold anyone help me? Thanks.

1

1 Answer 1

6

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.