title: Wrap or extend Angular Material component to create custom component
body: <p>I am very new to Angular / coming at this from the UI design side, so my terminology and understanding of basic Angular concepts is limited.</p>
  
  <p>My team has started building a site using Angular Material, and as the designer I'm trying to determine how to balance the benefits of an out-of-the-box tool like Material with the need for quite a bit of customization (mostly in the styles).</p>
  
  <p>I'd like to essentially build a custom library on top of existing Material components. I'd also like to structure this so it's very modular - i.e. rather than operating with huge/monolithic HTML and CSS files, I'd like to have single, smaller components for buttons, etc., with their own separate HTML and CSS.</p>
  
  <p>What I tried to do was simply wrap an Angular Material component in a new component I'd created, like so:</p>
  
  <p><strong>button.component.ts:</strong></p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  
  @Component({
    selector: 'ui-button',
    templateUrl: './button.component.html',
    styleUrls: ['./button.component.less']
  })
  export class ButtonComponent implements OnInit {
    @Input()
    color;
    disableRipple: boolean;
  
    constructor() {}
  
    ngOnInit() {}
  }
  </code></pre>
  
  <p><strong>button.component.html:</strong></p>
  
  <pre><code>&lt;button mat-button [color]="color" [disableRipple]="true"&gt;
    &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>I'm aware that I'll have to "pass down" some properties; haven't gotten that far yet. The issue I'm having is that the way I've tried to solve this problem results in a new DOM element, "ui-button", where I'd rather not have one since it causes focus issues, etc. Is there some other way to do this? Some way to extend the Angular Material component?</p>