Material design icons with webpack and angularjs Loading the wrong icons

Question

I use material design icons ( https://materialdesignicons.com/ ) and upload them using webpack in my angularjs app. Gulp is for my web page. My webpack configuration file has the following code for fonts:

{ test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader : 'url-loader' }

The problem that I am facing is that the displayed wepage has incorrect icons. When I use file-loaderinstead url-loader, I get the following warning in the console.

Failed to decode downloaded font, OTS parsing error: Failed to convert WOFF 2.0 font to SFNT

Failed to find out the problem. Thanks in advance.

Answer 1

{ test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' }

. .

Answer 2

:

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }