By default, Angular Material doesn’t apply global CSS. Meaning that a standard element (eg. <h1>) will not have Angular materials’ styles applied to it. So, when configured this way, in order to apply Angular material styles to a broad section of your HTML, you can use the mat-typography class <h1>This header doesn’t have Angular Material … Read more
Add some CSS with the :hover selector to the mat-row elements: .mat-row:hover { background-color: red; } StackBlitz demo
Based on feedback from comments, updated my answer by removing ‘::ng-deep’, but please read comment by @colin-fox, and understand how this will behave in global styling and at component level, many thanks! For Angular Material 7, works for outline color and inside filled in color .mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element { opacity: 0.03 !important; background-color: #005691!important; } … Read more
You can add this in your css ::ng-deep .mat-form-field-wrapper{ margin-bottom: -1.25em; } NOTE: As you remove the space you cannot put <mat-hint>hint</mat-hint> or <mat-error>error</mat-error> properly. Error and hint get inside the form-field. Without using ::ng-deep( for Angular 8 ) Turn off encapsulation of your component inside which you change the padding. You can do this … Read more
Just add the <mat-icon> inside mat-button or mat-raised-button. See the example below. Note that I am using material icon instead of your svg for demo purpose: <button mat-button> <mat-icon>mic</mat-icon> Start Recording </button> OR <button mat-raised-button color=”accent”> <mat-icon>mic</mat-icon> Start Recording </button> Here is a link to stackblitz demo.