Material: Loading angular-material with ES6 import syntax don't show font and icons

[pablorsk]

Actual Behavior:

• When angular-material is installed via npm install angular-material icons and fonts don't load.

Steps to reproduce the issue:

$ npm install angular-material

// index.ts
import 'angular-material';
import 'angular-material/angular-material.css';

Angular Versions:

• Angular Version: 1.5.8
• Angular Material Version: 1.1.0-rc.5

Additional info

• <md-icon> just show the word, icon font don't load
• Roboto never is loaded or installed via dependecies.

[topherfangio]

A couple of things:

1. I don't believe we're exporting our CSS in a special way for ES6, so you would still need to manually import that in your index.html file.
2. It looks like you're actually using Typescript (based on your // index.ts line above). If so, you can checkout https://github.com/angular/material-start/tree/wip/typescript which is a work-in-progress branch of our Material Start application which uses Typescript.

_Note: The README.md has NOT been updated, but the code should run. You can checkout the TYPESCRIPT.MD file to see how it currently works; although we're planning to update it to use just jspm instead of tsc for compilation._

If neither of those help, can you please give us a bit more information as to what you're trying to do? A full Codepen would be very helpful.

[maxime-menard]

Take a look at this :
https://google.github.io/material-design-icons/

All you need to do is include a single line of HTML:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

You can also do this in your index,scss file :

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

[pablorsk]

Thanks @maxime-menard and @topherfangio, your solutions work perfect. With that, also, I build a proposal for another developers searching a TODO for

Adding Angular Material for Webpack+NPM

Font

What you think about this solution for loading Material font with Webpack+NPM?

$ npm install --save roboto-fontface

Javascript/typescript file...

import 'angular-material';
import 'angular-material/angular-material.css';
import 'roboto-fontface/css/roboto/sass/roboto-fontface-regular.scss';

Icons

Add this lines to you file.(s)css

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

And next, just simple add icons like this:

<md-icon>face</md-icon>

If you like a online demo of this, working with generator-fountain-webapp, follow this link.