Click here to Skip to main content
15,878,543 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more:

I'm making a site and will place inline with my HTML, SVG pictures. I've made a component with Angular 2 but the SVG icons will not load. It's showing me this[^]

Below and on this fiddle[^] you could find my code:

HTML
<div *ngFor="let item of achievements; let i = index" class="achievementscontainer">
    <h3>{{item.name}}</h3>
    <p>{{item.description.replace('%d', item.next)}}</p>
    <div [innerHTML]="item.image" [class]="item.status"></div>
    <p class="bold">Progress till next achievement:</p>
    <p><span>{{item.progress}}</span>/<span>{{item.next}}</span></p>
</div>
ts
import { Component } from "@angular/core";
@Component({
    templateUrl: "./profile.component.html"
})
export class ProfileComponent {
    achievements = [
        { 
            image: `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
                        <path class="st0" d="M194.5,101.5c10.3-10.8,16.6-25.4,16.6-41.4C211.1,26.9,184.2,0,151,0C117.9,0,91,26.9,91,60.1 c0,15.8,6.1,30.2,16.1,40.9c-33.7,10.4-58.4,41.8-58.4,78.8v84.8c0,19.4,15.9,35.3,35.3,35.3h129.6c20.7,0,37.7-17,37.7-37.7v-82.5 C251.3,143.4,227.4,112.4,194.5,101.5z"/>
                    </svg>`, 
            name: "Follower", 
            description: "Followed %d people", 
            progress: 6,
            next: 35,
            status: "brons"
        }, { 
            image: `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
                        <path class="st0" d="M263.1,218.1l2.6-4.5l13.5,7.8c11.4-20.5,18.1-43.9,18.6-68.9H282v-5.2h15.7c-0.4-25-7-48.5-18.4-69l-13.7,7.9 l-2.6-4.5l13.7-7.9c-12.4-20.7-29.8-38.1-50.5-50.5l-7.9,13.7l-4.5-2.6l7.9-13.7c-20.5-11.4-44-18-69-18.4v15.7h-5.2V2.4 c-25,0.5-48.4,7.1-68.9,18.6l7.8,13.5L82,37.1l-7.8-13.5C53.6,36,36.3,53.4,23.9,74.1l13.4,7.7l-2.6,4.5l-13.4-7.7 C10,99,3.4,122.4,3,147.4h15.3v5.2H3c0.5,24.9,7.1,48.3,18.5,68.7l13.2-7.6l2.6,4.5l-13.2,7.6c12.4,20.6,29.7,37.9,50.3,50.3 l7.6-13.2l4.5,2.6l-7.6,13.2c20.4,11.3,43.8,18,68.7,18.4v-15.3h5.2v15.3c24.9-0.4,48.4-7,68.8-18.3l-7.7-13.3l4.5-2.6l7.7,13.3 c20.7-12.4,38-29.7,50.5-50.3L263.1,218.1z M228.1,55.1l-66.9,92.5c0.4,2.9,0,5.8-1.3,8.5l47.1,71.5c0.9,1.3,0.5,3.1-0.8,4l-8.4,5.6 c-1.3,0.8-3,0.5-3.8-0.8L146,163.7c-3.1-0.3-6.2-1.6-8.6-4c-5.5-5.5-5.5-14.3,0-19.8c3.6-3.6,8.6-4.8,13.2-3.7l65.1-90 c0.9-1.2,2.5-1.5,3.7-0.6l7.9,5.7C228.7,52.1,229,53.9,228.1,55.1z"/>
                    </svg>`, 
            name: "Tracker", 
            description: "Tracked %d series", 
            progress: 6,
            next: 20,
            status: "silver"
        }, { 
            image: `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
                        <path class="st0" d="M263.1,218.1l2.6-4.5l13.5,7.8c11.4-20.5,18.1-43.9,18.6-68.9H282v-5.2h15.7c-0.4-25-7-48.5-18.4-69l-13.7,7.9 l-2.6-4.5l13.7-7.9c-12.4-20.7-29.8-38.1-50.5-50.5l-7.9,13.7l-4.5-2.6l7.9-13.7c-20.5-11.4-44-18-69-18.4v15.7h-5.2V2.4 c-25,0.5-48.4,7.1-68.9,18.6l7.8,13.5L82,37.1l-7.8-13.5C53.6,36,36.3,53.4,23.9,74.1l13.4,7.7l-2.6,4.5l-13.4-7.7 c10,99,3.4,122.4,3,147.4h15.3v5.2H3c0.5,24.9,7.1,48.3,18.5,68.7l13.2-7.6l2.6,4.5l-13.2,7.6c12.4,20.6,29.7,37.9,50.3,50.3 l7.6-13.2l4.5,2.6l-7.6,13.2c20.4,11.3,43.8,18,68.7,18.4v-15.3h5.2v15.3c24.9-0.4,48.4-7,68.8-18.3l-7.7-13.3l4.5-2.6l7.7,13.3 c20.7-12.4,38-29.7,50.5-50.3L263.1,218.1z M228.1,55.1l-66.9,92.5c0.4,2.9,0,5.8-1.3,8.5l47.1,71.5c0.9,1.3,0.5,3.1-0.8,4l-8.4,5.6 c-1.3,0.8-3,0.5-3.8-0.8L146,163.7c-3.1-0.3-6.2-1.6-8.6-4c-5.5-5.5-5.5-14.3,0-19.8c3.6-3.6,8.6-4.8,13.2-3.7l65.1-90 c0.9-1.2,2.5-1.5,3.7-0.6l7.9,5.7C228.7,52.1,229,53.9,228.1,55.1z"/>
                    </svg>`, 
            name: "Watcher", 
            description: "Watched %d hours", 
            progress: 6,
            next: 50,
            status: "gold"
        }
    ];
}

The output in the browser is this:

HTML
<div _ngcontent-ejj-7="" class="achievementscontainer"> <!-- three thimes -->
    <h3 _ngcontent-ejj-7="">Follower</h3>
    <p _ngcontent-ejj-7="">Followed 35 people</p>
    <div _ngcontent-ejj-7="" ng-reflect-inner-h-t-m-l="&#10;                        &#10;                    " ng-reflect-class-name="brons" class="brons"></div>
    <p _ngcontent-ejj-7="" class="bold">Progress till next achievement:</p>
    <p _ngcontent-ejj-7=""><span _ngcontent-ejj-7="">6</span>/<span _ngcontent-ejj-7="">35</span></p>
</div>

How comes it that the SVG is not rendering in the browser with Angular 2?

P.S.: If you will run the code, you can check out this GitHub project: Web/frontend[^] on branch dev-profile in folder ./frontend/app/profile. The url is http://localhost:4200/profile[^].



What I have tried:

I've tried code above, asked this Stack overflow question[^] and a quick search on the internet by the comments I've got, but nothing found.

Posted
Updated 31-Dec-16 23:23pm

1 solution

After searching, I've found the solution to my problem. I've add constructor and methode form code below to my class:

ts
constructor(private sanitizer: DomSanitizer) {
}

transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
}

and in my HTML I use

HTML
<div [innerHTML]="transform(item.image)" [class]="item.status"></div>

in stead of

HTML
<div [innerHTML]="item.image" [class]="item.status"></div>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900