{"action":"opened","issue":{"url":"https://api.github.com/repos/angular/angular/issues/5041","labels_url":"https://api.github.com/repos/angular/angular/issues/5041/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/5041/comments","events_url":"https://api.github.com/repos/angular/angular/issues/5041/events","html_url":"https://github.com/angular/angular/issues/5041","id":114397077,"number":5041,"title":"svg elements not rendered","user":{"login":"rolandjitsu","id":1479737,"avatar_url":"https://avatars.githubusercontent.com/u/1479737?v=3","gravatar_id":"","url":"https://api.github.com/users/rolandjitsu","html_url":"https://github.com/rolandjitsu","followers_url":"https://api.github.com/users/rolandjitsu/followers","following_url":"https://api.github.com/users/rolandjitsu/following{/other_user}","gists_url":"https://api.github.com/users/rolandjitsu/gists{/gist_id}","starred_url":"https://api.github.com/users/rolandjitsu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rolandjitsu/subscriptions","organizations_url":"https://api.github.com/users/rolandjitsu/orgs","repos_url":"https://api.github.com/users/rolandjitsu/repos","events_url":"https://api.github.com/users/rolandjitsu/events{/privacy}","received_events_url":"https://api.github.com/users/rolandjitsu/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-10-31T08:15:21Z","updated_at":"2015-10-31T08:15:21Z","closed_at":null,"body":"I'm not sure if it's a bug or if it's something that I do wrong but it looks like none of the SVG elements I insert on the page are rendered.\r\n\r\nI have the app running live [here](https://ng2-lab.firebaseapp.com/). And I insert the SVG elements with:\r\n```js\r\nimport {\r\n\tElementRef,\r\n\tComponent,\r\n\tViewEncapsulation,\r\n\tOnDestroy\r\n} from 'angular2/angular2';\r\n\r\nimport { Icon } from '../../services';\r\n\r\n@Component({\r\n\tselector: 'glyph',\r\n\tencapsulation: ViewEncapsulation.Emulated, // ViewEncapsulation.Emulated, ViewEncapsulation.Native, ViewEncapsulation.None (default)\r\n\ttemplate: '',\r\n\tstyleUrls: [\r\n\t\t'app/components/glyph/glyph.css'\r\n\t],\r\n\tdirectives: [\r\n\t\tGlyph\r\n\t],\r\n\tinputs: [\r\n\t\t'src'\r\n\t]\r\n})\r\n\r\nexport class Glyph implements OnDestroy {\r\n\tel: HTMLElement;\r\n\tprivate _icon: Icon;\r\n\tconstructor(elementRef: ElementRef, icon: Icon) {\r\n\t\tthis.el = elementRef.nativeElement;\r\n\t\tthis._icon = icon;\r\n\t}\r\n\tset src(src: string) {\r\n\t\tthis._icon.get(src).then((svg) => {\r\n\t\t\tif (this.el.children.length) this.el.replaceChild(svg, this.el.firstChild);\r\n\t\t\telse this.el.appendChild(svg);\r\n\t\t});\r\n\t}\r\n\tonDestroy() {\r\n\t\tlet svg = this.el.querySelector('svg');\r\n\t\tif (svg) this.el.removeChild(svg);\r\n\t}\r\n}\r\n```\r\n"}}