title: Retrieving icons from assets via MdIconRegistry and DomSanitizer
body: <p>Hi I have a <code>components/home-component/home.component.html</code> and <code>components/home-component/home.component.ts</code> in my project. I also have a <code>svg</code> file <code>assets/homenav/home_icon.svg</code>. I am loading the icons in the constructor of the <code>home.component.ts</code>:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MdIconRegistry } from '@angular/material';
  import { DomSanitizer } from '@angular/platform-browser';
  
  @Component({
      moduleId: module.id,
      templateUrl: 'home.component.html',
      styleUrls: ['./home.component.css']
  })
  
  export class HomeComponent implements OnInit {
  
      constructor(private iconRegistry: MdIconRegistry, private sanitizer: DomSanitizer) {
          iconRegistry.addSvgIcon('home', sanitizer.bypassSecurityTrustResourceUrl('assets/homenav/home_icon.svg'));        
      }
  
      ngOnInit() { }
  
  }
  </code></pre>
  
  <p>If I run my app the app itself works fine. Though the icon is not being rendered. I am loading the icon like this:</p>
  
  <pre><code>&lt;md-icon class="homeNavIcon" color="primary" svgIcon="home"&gt;&lt;/md-icon&gt;
  </code></pre>
  
  <p>There are <strong>no error messages</strong> or any other complaining. If I enter <code>http://localhost:4200/assets/homenav/home_icon.svg</code> as url the icon gets displayed in the browser correctly.</p>
  
  <p>Also if I set a breakpoint the <code>HomeComponent</code> constructor and try to call <code>iconRegistry</code>call in the console I get:</p>
  
  <p><a href="https://i.stack.imgur.com/gBJbI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gBJbI.png" alt="enter image description here"></a></p>
  
  <p>I also tried changing the url to:</p>
  
  <pre><code>iconRegistry.addSvgIcon('home', sanitizer.bypassSecurityTrustResourceUrl('/../../../assets/homenav/home_icon.svg'));  
  </code></pre>
  
  <p>and several other combinations with no luck. It also <strong>seems to work</strong> if I place the <code>home.component</code> <strong>directly into the <code>app</code> folder</strong>.</p>
  
  <p>Am I providing the wrong url or am I missing something else here.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I realized that <code>svgElement</code> is also null if the icon are displayed correctly in my other projects. I also I wanted to provide an overview over my <code>@NgModule</code>:</p>
  
  <pre><code>@NgModule({
    declarations: [
      AppComponent,
      LoginComponent,
      HomeComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      FormsModule,
      MaterialModule,
      MdCardModule,
      HttpModule,
      BrowserAnimationsModule
    ],
    providers: [
      AuthGuard,
      AuthenticationService,
      UserService,
      // providers used to create fake backend
      fakeBackendProvider,
      MockBackend,
      BaseRequestOptions
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>Update 2:</strong></p>
  
  <p>As I already supposed the icons from the <code>MdIconRegistry</code> are never even loaded. I can insert any nonsense as Url this will not throw any errors. i.e.:</p>
  
  <pre><code>iconRegistry.addSvgIcon('home', 
  sanitizer.bypassSecurityTrustResourceUrl('LoremIpsumblabla')); 
  </code></pre>
  
  <p>This call will not throw any exceptions, while in another project I get:</p>
  
  <blockquote>
    <p>Failed to load resource: the server responded with a status of 404
    (Not Found) :4200/LoremIpsumblabla</p>
  </blockquote>