title: Why isn't my dynamically-created button being styled with Angular Material?
body: <p>I am trying to create directive which show a button when mouseover.</p>
  
  <p>In angularJS I created an element by:</p>
  
  <pre><code>    angular.element("&lt;button mat-button&gt;&lt;/button&gt;");
  </code></pre>
  
  <p>In angular5 Im trying to create element by:</p>
  
  <pre><code>button: any;
  
  constructor(private el: ElementRef,
              private renderer: Renderer2) {
      this.createButton();
  }
  
  private createButton(){
      this.button = this.renderer.createElement("button");
      this.renderer.setAttribute(this.button,"mat-fab", "");
      this.renderer.addClass(this.button, "mat-fab");
      this.renderer.appendChild(this.el.nativeElement, this.button);
  }
  </code></pre>
  
  <p>But unfortunatelly the button looks like regular button, not the material design button. It looks like renderer does not render the button but just insert some html without rendering. </p>
  
  <p>Please help me. </p>