title: How can I add html element with string interpolation in angular?
body: <p>How can I add a html element dynamically using string interpolation <strong>without add any html tag</strong>? Exp:</p>
  
  <p>This is my obj in my component</p>
  
  <pre><code>myObj = {
      title: 'Header Title',
      icon: '&lt;i class="fa fa-user"&gt;'
  }
  </code></pre>
  
  <p>I want to add this like;</p>
  
  <pre><code>&lt;header&gt;
      {{myObj.title}} - {{myObj.icon}}
  &lt;/header&gt;
  </code></pre>
  
  <p>{{myObj.icon}} rendered as text, but I want render as html. How can?</p>
  
  <p>I want the result to be as follows</p>
  
  <pre><code>&lt;header&gt;
      Header Title &lt;i class ="fa fa-user"&gt;&lt;/i&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>and if I change my obj like this;</p>
  
  <pre><code>myObj = {
      title: 'Header Title',
      icon: '&lt;mat-icon&gt;search&lt;/mat-icon&gt;'
  }
  </code></pre>
  
  <p>render as</p>
  
  <pre><code>&lt;header&gt;
      Header Title &lt;mat-icon&gt;search&lt;/mat-icon&gt;
  &lt;/header&gt;
  </code></pre>