title: How to render string as SVG dynamically in Angular 8
body: <p>I have list of items with icon as SVG string given below</p>
  
  <pre><code>steps=[
          {
              "id": 1,
              "code": "ABC",
              "dname": "abc",
              "conveyStep": null,
              "sequence": 1,
              "fqcn": null,
              "status": "A",
              "icon": `&lt;svg xmlns="http://www.w3.org/2000/svg" width="24.148" height="31.393" viewBox="0 0 24.148 31.393"&gt;
      &lt;defs&gt;
      &lt;/defs&gt;
      &lt;g id="noun_Document_188541" transform="translate(-15 -5)"&gt;
          &lt;g id="Group_1821" data-name="Group 1821" transform="translate(15 5)"&gt;
              &lt;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)"/&gt;
              &lt;path id="Rectangle_8" d="M0 0h14.489v.604H0z" class="cls-1" data-name="Rectangle 8" transform="translate(4.83 25.355)"/&gt;
              &lt;path id="Rectangle_9" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 9" transform="translate(4.83 18.111)"/&gt;
              &lt;path id="Rectangle_10" d="M0 0h14.489v.604H0z" class="cls-1" data-name="Rectangle 10" transform="translate(4.83 15.696)"/&gt;
              &lt;path id="Rectangle_11" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 11" transform="translate(13.282 13.282)"/&gt;
              &lt;path id="Rectangle_12" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 12" transform="translate(13.282 10.867)"/&gt;
              &lt;path id="Rectangle_13" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 13" transform="translate(4.83 20.526)"/&gt;
              &lt;path id="Rectangle_14" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 14" transform="translate(4.83 22.941)"/&gt;
              &lt;g id="Group_1819" data-name="Group 1819" transform="translate(13.282 18.715)"&gt;
                  &lt;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)"/&gt;
                  &lt;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)"/&gt;
              &lt;/g&gt;
              &lt;g id="Group_1820" data-name="Group 1820" transform="translate(5.428 9.056)"&gt;
                  &lt;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)"/&gt;
                  &lt;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)"/&gt;
              &lt;/g&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;`
          },
  {
  ...
  }
  ];
  ...
  </code></pre>
  
  <p>now I want to show these <strong>SVG string</strong> as <strong>SVG</strong> in my <strong>HTML</strong>
  but its not showing my SVG</p>
  
  <pre><code>&lt;div class="scrollmenu" id="scroll_menu"&gt;
      &lt;div class="steps" *ngFor="let step of newSteps"&gt;
          &lt;p class="completed"&gt;&lt;/p&gt;
          &lt;p style="width:5px;margin-top:-13px;margin-left: 18px;margin-left: 37px;"&gt;&lt;i class="fa fa-check-circle"
                  aria-hidden="true"&gt;&lt;/i&gt;&lt;/p&gt;
          &lt;div class="step-image"&gt;
            \\here I want to show my svg
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>