Angular 通过MdIconRegistry和Domsanizer从资产检索图标

您好，我的项目中有一个

components/home component/home.component.html

和

components/home component/home.component.ts

。我还有一个

svg

文件

assets/homenav/home\u 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>

还有其他几种没有运气的组合。如果我将
home.component
直接放入
应用程序
文件夹，它似乎也能工作

我是否提供了错误的url，或者我在这里遗漏了其他内容

更新：

我意识到如果图标在我的其他项目中正确显示，
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，这将不会抛出任何错误。i、 e:

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

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

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

尝试更改此路径

'./assets/homenav/home_icon.svg'

如果没有看到“addSvgIcon”的代码，或者至少有更多的上下文，“addSvgIcon”是由angular Material的MdIconRegistry提供的，那么很难进一步诊断。嗯，我已经看过了代码，它并没有真正帮助我：-p。。它所做的只是将图标添加到svg图标配置的映射中。从代码和文档来看，您似乎正确地调用了它。如果没有给出错误，那么路径应该是正确的。很难说HomeComponent是主应用程序模块的一部分，还是子模块？@Z.Bagley是子模块？您是否确保在子模块中包括MdCardModule以及应用程序模块？@Z.Bagley从“@angular/material”导入{MaterialModule，MdCardModule}；你把它放在
@NgModule（{imports:[…，mdcardmodel]，…}）
？
'./assets/homenav/home_icon.svg'