title: Material design icons with webpack and angularjs loading wrong icons
body: <p>I am using material design icons (<a href="https://materialdesignicons.com/" rel="nofollow">https://materialdesignicons.com/</a>) and loading them using webpack in my angularjs app. Gulp serves my webpage. My webpack configuration file has the following code for fonts:</p>
  
  <p><code>
  { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader : 'url-loader' }
  </code></p>
  
  <p>The problem I am facing is that the wepage that is getting rendered has wrong icons displayed. When I use <code>file-loader</code> instead of <code>url-loader</code>, I get following warning in the console.</p>
  
  <p><code>
  Failed to decode downloaded font, OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
  </code></p>
  
  <p>Unable to figure out the issue. Thanks in advance.</p>