webpack url-loader and css font-face

I'm using lit-element in combination with webpack. I'm trying to load fonts and use them in my project:

import eot from 'root/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.eot'
import woff2 from 'root/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2'
import woff from 'root/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff'
import ttf from 'root/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf'

export const css_mdi = css`
  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(${unsafeCSS(eot)}); 
    src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      url(${unsafeCSS(woff2)}) format('woff2'),
      url(${unsafeCSS(woff)}) format('woff'),
      url(${unsafeCSS(ttf)}) format('truetype');
  }
`

I'm using webpack url-encoder to encode fonts and images as so:

{
  test: /\.(jpg|jpeg|png|svg|ico|eot|ijmap|ttf|woff|woff2)$/,
  use:{
    loader:'url-loader'
  }
}

I'm not sure why this isn't working, I'm suspecting lit-element but I'm not familier enough to say. So is this the correct way to use webpack, fonts and lit-element? Should this work?

lit / lit-element

webpack url-loader and css font-face #1178