Remove padding from mat-list-item

Question

The mat-list component in angular/material2 applies a top and bottom padding of 16px. I'd like to make this 0px. I've tried applying a style with a higher specificity but it isn't working (or I'm doing it wrong).The style I'm trying to override is:

I'm trying to override this with:

.list .mat-list .mat-list-item .mat-multi-line .mat-list-item-content {   padding-top: 0;   padding-bottom: 0; } 

<div class="list">   <mat-list>     <mat-list-item *ngFor="let item of queue">       <h1 matLine>{{ item.id }}: {{ item.status}} {{ item.statusDate }}</h1>       <p matLine>{{ item.name }}</p>       <p matLine>for {{ item.customer }}</p>       <div matLine>         <button mat-icon-button (click)="openTab(item)">           <mat-icon fontIcon="icon-open"></mat-icon>         </button>         <button *ngIf="showAssignToMe" mat-icon-button (click)="assignToMe(item)">           <mat-icon fontIcon="icon-assign_to_me"></mat-icon>         </button>         <button mat-icon-button (click)="notes(item)">           <mat-icon fontIcon="icon-comment"></mat-icon>         </button>       </div>     </mat-list-item>   </mat-list> </div> 

Answer 1

None of the previous proposions worked for me on Angular 6, 7 & 8

What I proposed is a deprecated solution (https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep) but it still continues to work:

:host /deep/ .mat-list-item-content {   padding: 0!important; }