通过MdIconRegistry和DomSanitizer从资产中检索图标

Question

您好我的项目中有components/home-component/home.component.html和components/home-component/home.component.ts。我还有svg个文件assets/homenav/home_icon.svg。我在home.component.ts：

的构造函数中加载图标

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() { }

}

如果我运行我的应用程序，应用程序本身工作正常。虽然图标没有呈现。我正在加载这样的图标：

<md-icon class="homeNavIcon" color="primary" svgIcon="home"></md-icon>

没有错误消息或任何其他抱怨。如果我输入http://localhost:4200/assets/homenav/home_icon.svg作为网址，则图标会在浏览器中正确显示。

此外，如果我设置了一个断点HomeComponent构造函数，并尝试在控制台中调用iconRegistry调用：

我也尝试将网址更改为：

iconRegistry.addSvgIcon('home', sanitizer.bypassSecurityTrustResourceUrl('/../../../assets/homenav/home_icon.svg'));  

和其他几个没有运气的组合。如果我将home.component 直接放入app文件夹，似乎也可以。

我提供了错误的网址，或者我在这里错过了其他内容。

更新

我意识到如果图标在我的其他项目中正确显示，svgElement也为空。我还想概述@NgModule：

@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 { }

更新2：

正如我已经假设MdIconRegistry中的图标从未加载过。我可以插入任何废话作为Url这不会抛出任何错误。即：

iconRegistry.addSvgIcon('home', 
sanitizer.bypassSecurityTrustResourceUrl('LoremIpsumblabla')); 

此调用不会抛出任何异常，而在另一个项目中我得到：

  

无法加载资源：服务器响应状态为404   （未找到）：4200 / LoremIpsumblabla

Answer 1

尝试更改此

的路径

'./assets/homenav/home_icon.svg'