title: Using angular 2 material icons
body: <p>I'm trying to use angular material 2 to display icons on my website, but I'm a little confused.</p>
  
  <p>This is how it's supposed to work, from the demo in github repo of material 2:</p>
  
  <p><a href="https://github.com/angular/material2/blob/master/src/demo-app/icon/icon-demo.ts" rel="noreferrer">https://github.com/angular/material2/blob/master/src/demo-app/icon/icon-demo.ts</a></p>
  
  <p>I've been trying to use it but no icons are shown at all.</p>
  
  <p>This is how I set it up:</p>
  
  <p>app.component.ts</p>
  
  <pre><code>import {MdIcon, MdIconRegistry} from '@angular2-material/icon/icon';
  
  @Component({
    ...
    encapsulation: ViewEncapsulation.None,
    viewProviders: [MdIconRegistry],
    directives: [MdIcon],
  })
  export class MyComponent{
    constructor(private router: Router,
                private JwtService:JwtService,
                mdIconRegistry: MdIconRegistry){
      mdIconRegistry.addSvgIconSetInNamespace('core', 'fonts/core-icon-set.svg')
    }
  }
  </code></pre>
  
  <p>and the template..</p>
  
  <pre><code>&lt;md-icon&gt;home&lt;/md-icon&gt;
  </code></pre>
  
  <p>The page loads with no errors, but no icon is shown. What could have gone wrong?</p>