title: Directive in Angular 5 for return html
body: <p>How can I return small html piece by directive. This is what I am trying to do:</p>
  
  <pre><code>&lt;app-icon glyph="music"&gt;&lt;app-icon&gt;
  </code></pre>
  
  <p>should be replaced by: </p>
  
  <pre><code>&lt;span class='glyphicon glyphico-music' aria-hidden='true'&gt;&lt;/span&gt;
  </code></pre>
  
  <p>And my wrong directive:</p>
  
  <pre><code>import { Directive } from "@angular/core";
  
  @Directive({
    selector: "[app-icon]"
  })
  export class IconDirective {
  
    constructor(value: string) {
      return "&lt;span class='glyphicon glyphicon-" +value + "' aria-hidden='true'&gt;&lt;/span&gt;";
    }
  
  }
  </code></pre>