title: Dynamic HTML evaluation: show an <ion-icon> inside a HTML string
body: <p>In an Ionic2 application, I want to render <code>&lt;ion-icon&gt;</code>s contained in an HTML string. The HTML string could be something along the lines of:</p>
  
  <pre><code>public explanation = "To open the menu, click the &lt;ion-icon name='menu'&gt;&lt;/ion-icon&gt; icon to the top left.";
  </code></pre>
  
  <p>The strings are stored in a translation file. When being output, I know that HTML strings are escaped by default and I tried to output the string with to prevent sanitization:</p>
  
  <pre><code>&lt;p [innerHTML]="explanation"&gt;&lt;/p&gt;
  </code></pre>
  
  <p><strong>Problem:</strong> Now the <code>&lt;ion-icon&gt;</code> code is not escaped, but the icon does not render either (even though the node is present in the DOM). The code works well when using regular HTML like <code>&lt;b&gt;</code> tags. </p>
  
  <p><strong>Dynamic template evaluation?</strong> </p>
  
  <p>I suspect the behavior is due to the fact that the code is directly inserted into the DOM and not evaluated by Ionic/Angular. For Angular1 there has been a <a href="https://stackoverflow.com/questions/18157305/angularjs-compiling-dynamic-html-strings-from-database">large discussion here on SO</a>. Solutions for Angular2 I have seen so far use <a href="https://stackoverflow.com/questions/34855718/angular-2-append-component-dynamic-to-dom-or-template">the deprecated DynamicComponentLoader</a> or <a href="http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2-rc-5/" rel="nofollow noreferrer">are fairly complex</a>.</p>
  
  <p>Is there any <em>easy</em> solution to showing the icon? Defining two translation strings <code>...LEFT_OF_ICON</code> and <code>...RIGHT_OF_ICON</code> would work in this case, but feels a bit awkward.</p>