Angular <mat-list-option> custom height

Issue

In this official example of <mat-selection-list> with <mat-list-option>. I want to give every item within the list a custom height.

I have tried:

.mat-list-option {
  height: 100px
}

And even tried to set the height to inside element using a selector. It won't work. Seems mat-list-option has a preconfigured height of 48px.

Solution

Indeed, this looks a bit out of usual way of styling, but there is a hack. And use mat-list-option and not the homonymous class:

css:

mat-list-option:nth-child(n){
  height: 100px;
}

Demo

Answered By - Vega