Wrap or extend Angular Material component to create custom component

Question

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.

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).

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.

What I tried to do was simply wrap an Angular Material component in a new component I'd created, like so:

button.component.ts:

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() {}
}

button.component.html:

<button mat-button [color]="color" [disableRipple]="true">
  <ng-content></ng-content>
</button>

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?