Question: I am using `Angular Material`. I have a form with various fields and list items. I have changed the size of `mat-form-field` inputs using below 

```
mat-form-field.mat-form-field {
  font-size: 14px;
}

```

However since list are not a part of `mat-form-field` they are still their default `16px`. How can I change the size of the `<mat-list-item>`? 

```
<mat-list-item *ngFor="let file of files">{{file.name}}<mat-list-item>

```

Answer: 
I was actually doing this yesterday for my mat-list-items. h6 turned out to be an appropriate size for me. 

```
   <mat-list-item *ngFor="let file of files">
     <span style="font-size:12px">
       {{file.name}}
     </span>
   <mat-list-item>

```

or 

```
   <mat-list-item *ngFor="let file of files">
    <h6>
      {{file.name}}
    </h6>
   <mat-list-item>

```
You can add the styling directly to the markup. If you use class to reference CSS file, sometimes it won't work.

```
<mat-list-item style="font-size: 14px; height: 25px" >Test</mat-list-item>

```