How to use material fonts and icons locally with material-ui?

Question

I do not have Internet access when running my material-ui application so I want to install locally the Material Design icons and fonts. I have been unable to do so. For example, I tried to use the icons by:

1. Downloading and copying the icon fonts to my styles folder
2. Reference the fonts in the main.css of my application as suggested by Google

3. Import the main.css in my application (I am using webpack)

   But, the FontIcon component does not show the icon.

In my main.css I have:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
  local('MaterialIcons-Regular'),
  url(material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
  url(material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
  url(material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

And in index.js I have:

import "./assets/styles/main.css";

Answer 1

According to css-loader's documentation:

@import and url(...) are interpreted like require() and will be resolved by the css-loader.

So, if you are using css-loader, this should be working "out of the box". Make sure your CSS loader looks a bit like:

{ test: /\.css$/, loader: "style-loader!css-loader" }

So.. if are you already doing this..

Since you are using webpack, you could have a look at the webpack file-loader. You'll need to include it in your loaders array in the module object within your webpack config.

To install the fileloader if you do not have it:

npm install file-loader --save-dev

And a sample loader:

{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    loader: 'file?name=material-design-icons/iconfont/[name].[ext]'
}

You may need to play around with the name attribute and the path that you include the fonts in your CSS. The name directory in the above loader is where the file-loader dumps the files (often your outpath.path in webpack.config.js if one has been defined). Run webpack and see what it gives you.

Or..

You could also embed the font file as a base-64 encoded data-uri blob. To do that, install the url-loader and use something like the following loaders. This time you need to specify a mime-type, so each file needs it's own loader with it's respective mime-type

{ test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=material-design-icons/iconfont/[name].[ext]' },
{ test: /\.woff$/, loader: 'url?limit=65536&mimetype=application/font-woff&name=material-design-icons/iconfont/[name].[ext]' },
{ test: /\.woff2$/, loader: 'url?limit=65536&mimetype=application/font-woff2&name=material-design-icons/iconfont/[name].[ext]' },
{ test: /\.[ot]tf$/, loader: 'url?limit=65536&mimetype=application/octet-stream&name=material-design-icons/iconfont/[name].[ext]' },
{ test: /\.eot$/, loader: 'url?limit=65536&mimetype=application/vnd.ms-fontobject&name=material-design-icons/iconfont/[name].[ext]' }

Note, however, that I have set a limit of 64K for each file as browser support for data-uri blob's over 64K isn't so great, although you may be okay to remove this.

I personally suggest trying the file-loader method.

And if you are still having problems..

You should be able to require your files in your CSS. Use this in combination with the file-loader above. require returns the path to the asset, so it's possible to require inside the value of your CSS attribute. Which would end up looking like this:

@font-face {
  /* .... */ 
  url(require('material-design-icons/iconfont/MaterialIcons-Regular.woff2')) format('woff2'),
  url(require('material-design-icons/iconfont/MaterialIcons-Regular.woff')) format('woff'),
  url(require('material-design-icons/iconfont/MaterialIcons-Regular.ttf')) format('truetype');
  /* .... */
}