How to remove underline of mat-select component
You can do this: ::ng-deep .mat-form-field-underline { display: none; } StackBlitz
angular-material
text-align in md-grid-tile (Angular Material) doesn’t work
You could simply put a span or div tag around your text inside md-grid-tile: <md-grid-tile> <div class=”text-inside-grid”>{{ video.title }}</div> </md-grid-tile> and then style it: .text-inside-grid { position: absolute; left: 5px; }
‘mat-toolbar’ is not a known element – Angular 5
That’s because you have to import a module to the module which contains the component declaration, not into the component itself: app.module.ts import { MaterialModule } from ‘./material.module’; @NgModule({ imports: [ // … MaterialModule ], declarations: [ MyCoolComponent, // … ] }) P.S. The correct way to use a material icon is to use the … Read more
Angular Material. to highlight a table row on mouse over
Add some CSS with the :hover selector to the mat-row elements: .mat-row:hover { background-color: red; } StackBlitz demo
In Angular Material what does setting up global typography styles mean?
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
angular-material change checkbox color
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
How to remove space bottom mat-form-field
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
How to add icon to mat-icon-button
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.