Unable to retrieve svg icon using MdIconRegistry and DomSanitizer

Bug, feature request, or proposal:

Bug

What is the expected behavior?

I’m following the angular material tutorial and trying to register a svg icon in my component. I expected to register the icon in the component.ts and use it in the template, but for some reason I get an 404 error when I try to consume the icon in the <md-icon svgIcon> in the template .

What is the current behavior?

The application does not crash, but the icon is not shown and I get this message on the browser’s console: “Error retrieving icon: Response with status: 404 Not Found for URL: ./thumbs.svg”

What are the steps to reproduce?

I could not reproduce the bug in Plunker, because for some magic reason when I copied and pasted my code in Plunker everything worked fine! I’m starting to think this have some to do with my app configuration, like something that is blocking the request for the svg icon.

Which versions of Angular, Material, OS, browsers are affected?

Angular: v2.4.5 Material: Latest material from master branch Ubuntu 16.04 64bit Nodejs v7.4.0 Browser: Chrome and Firefox

Is there anything else we should know?

• app.component.ts:

@Component({ moduleId: module.id, selector: 'senec-app', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], viewProviders: [MdIconRegistry] })

export class AppComponent { constructor(iconReg: MdIconRegistry, sanitizer: DomSanitizer) { iconReg.addSvgIcon('thumbs', sanitizer.bypassSecurityTrustResourceUrl('./thumbs.svg')); } name = 'Angular'; }

• app.component.html:

<md-icon svgIcon="thumbs"></md-icon>

• systemjs.config:

/** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', 'hammerjs': 'npm:hammerjs/hammer.js', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', '@angular/material': 'npm:@angular/material/bundles/material.umd.js', '@angular/flex-layout': 'npm:@angular/flex-layout/bundles/flex-layout.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' } } }); })(this);

• tsconfing.json:

{ "compilerOptions": { "target": "es6", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "es2016", "dom" ], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true } }

My file tree (showing the relevant stuff):

• app/
  • app.component.ts
  • app. component.html
  • app.module.ts
  • main.ts
  • thumbs.svg
• index.html
• systemconfig.js
• tsconfig.js
• thumbs.svg
• node_modules/

As you can see, yes, I placed the thumbs.svg in two locations to make sure that it is not a miss referenced file mistake

[isherwood]

I have the same issue, though I don’t even get a 404 on the images. It just fails silently. This doesn’t seem like a support issue. Either it’s a bug or the docs are lacking, I think.

mdIconRegistry.addSvgIcon('owl_symbol', sanitizer.bypassSecurityTrustResourceUrl('/static/images/angular/icons/owl.svg'));

[tinayuangao]

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.