How to render string as SVG dynamically in Angular 8

Question

I have list of items with icon as SVG string given below

steps=[
        {
            "id": 1,
            "code": "ABC",
            "dname": "abc",
            "conveyStep": null,
            "sequence": 1,
            "fqcn": null,
            "status": "A",
            "icon": `<svg xmlns="http://www.w3.org/2000/svg" width="24.148" height="31.393" viewBox="0 0 24.148 31.393">
    <defs>
    </defs>
    <g id="noun_Document_188541" transform="translate(-15 -5)">
        <g id="Group_1821" data-name="Group 1821" transform="translate(15 5)">
            <path id="Path_1051" d="M31.55 5H15v31.393h24.148V12.6zm.35 2.061l5.183 5.183H31.9V7.061zM16.2 35.185V6.208h14.5v7.244h7.244v21.733H16.208z" class="cls-1" data-name="Path 1051" transform="translate(-15 -5)"/>
            <path id="Rectangle_8" d="M0 0h14.489v.604H0z" class="cls-1" data-name="Rectangle 8" transform="translate(4.83 25.355)"/>
            <path id="Rectangle_9" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 9" transform="translate(4.83 18.111)"/>
            <path id="Rectangle_10" d="M0 0h14.489v.604H0z" class="cls-1" data-name="Rectangle 10" transform="translate(4.83 15.696)"/>
            <path id="Rectangle_11" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 11" transform="translate(13.282 13.282)"/>
            <path id="Rectangle_12" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 12" transform="translate(13.282 10.867)"/>
            <path id="Rectangle_13" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 13" transform="translate(4.83 20.526)"/>
            <path id="Rectangle_14" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 14" transform="translate(4.83 22.941)"/>
            <g id="Group_1819" data-name="Group 1819" transform="translate(13.282 18.715)">
                <path id="Path_1052" d="M53.144 62.452a3.348 3.348 0 0 0 1.07-.771 1.835 1.835 0 0 0 .447-1.066h-.338a1.838 1.838 0 0 1-.61-.084.971.971 0 0 1-.381-.235.832.832 0 0 1-.2-.319 1.147 1.147 0 0 1-.057-.361.894.894 0 0 1 .311-.674 1.042 1.042 0 0 1 .733-.289 1.237 1.237 0 0 1 1.02.439 1.881 1.881 0 0 1 .356 1.216 2.287 2.287 0 0 1-.613 1.457 3.989 3.989 0 0 1-1.475 1.114z" class="cls-1" data-name="Path 1052" transform="translate(-53.078 -58.653)"/>
                <path id="Path_1053" d="M61.8 62.452a3.348 3.348 0 0 0 1.07-.771 1.835 1.835 0 0 0 .447-1.066h-.338a1.838 1.838 0 0 1-.61-.084.971.971 0 0 1-.381-.235.832.832 0 0 1-.2-.319 1.147 1.147 0 0 1-.057-.361.894.894 0 0 1 .311-.674 1.042 1.042 0 0 1 .733-.289 1.237 1.237 0 0 1 1.02.439 1.881 1.881 0 0 1 .356 1.216 2.287 2.287 0 0 1-.613 1.457 3.989 3.989 0 0 1-1.475 1.114z" class="cls-1" data-name="Path 1053" transform="translate(-58.713 -58.653)"/>
            </g>
            <g id="Group_1820" data-name="Group 1820" transform="translate(5.428 9.056)">
                <path id="Path_1054" d="M41.569 31.389a3.348 3.348 0 0 0-1.07.771 1.835 1.835 0 0 0-.447 1.066h.338a1.838 1.838 0 0 1 .61.084.971.971 0 0 1 .381.235.832.832 0 0 1 .2.319 1.147 1.147 0 0 1 .057.361.894.894 0 0 1-.311.674 1.042 1.042 0 0 1-.733.289 1.237 1.237 0 0 1-1.02-.439 1.881 1.881 0 0 1-.356-1.216 2.287 2.287 0 0 1 .613-1.457 3.989 3.989 0 0 1 1.469-1.114z" class="cls-1" data-name="Path 1054" transform="translate(-36.196 -30.962)"/>
                <path id="Path_1055" d="M32.915 31.389a3.348 3.348 0 0 0-1.07.771 1.835 1.835 0 0 0-.447 1.066h.338a1.838 1.838 0 0 1 .61.084.971.971 0 0 1 .381.235.832.832 0 0 1 .2.319 1.147 1.147 0 0 1 .057.361.894.894 0 0 1-.311.674 1.042 1.042 0 0 1-.733.289 1.237 1.237 0 0 1-1.02-.439 1.881 1.881 0 0 1-.356-1.216 2.287 2.287 0 0 1 .613-1.457 3.989 3.989 0 0 1 1.475-1.114z" class="cls-1" data-name="Path 1055" transform="translate(-30.561 -30.962)"/>
            </g>
        </g>
    </g>
</svg>`
        },
{
...
}
];
...

now I want to show these SVG string as SVG in my HTML but its not showing my SVG

<div class="scrollmenu" id="scroll_menu">
    <div class="steps" *ngFor="let step of newSteps">
        <p class="completed"></p>
        <p style="width:5px;margin-top:-13px;margin-left: 18px;margin-left: 37px;"><i class="fa fa-check-circle"
                aria-hidden="true"></i></p>
        <div class="step-image">
          \\here I want to show my svg
        </div>
    </div>
</div>

and I want to give style to some of the svg depending upon some condition so is there any way to also give style to dynamically added avg? any help would be appreciated.

Answer 1

So basically I was getting security issues after ignoring DomSanitizer so I went to https://angular.io/guide/security#xss and concluded and made changes in my code to get what I wanted. I imported DomSanitizer

import { DomSanitizer} from '@angular/platform-browser';
....

newSteps=[];
constructor(private sanitizer: DomSanitizer) { }

ngOnInit() {
    for (let i = 0; i < this.steps.length; i++) {
      this.newSteps.push(this.sanitizer.bypassSecurityTrustHtml(this.steps[i].icon));
    }
}

and then simply user [innerHTML] tagin html file

 <div id="steps" class="step-image" [innerHTML]="step">
  </div>

Answer 2

You could create a directive that takes the svg string and adds it to the innerHTML of its host element. Then use the directive to dynamically apply styles to the inner svg.

NOTE: This bypasses Angular's DomSanitizer and leaves you open to XSS vulnerabilities. Only use this approach if you trust the source of the svg string.

@Directive({
  selector: '[svgIcon]',
})
export class SvgIconDirective implements OnChanges {

  @Input()
  svg?: string;

  constructor(
    private _elementRef: ElementRef,
  ) {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes.svg) {
      this._elementRef.nativeElement.innerHTML = '';

      if (this.svg) {
        this._elementRef.nativeElement.innerHTML = this.svg;
      }
    }  
  }

}