how to resize mat chip in Angular

Question

I'm wondering if there is a way to resize mat-chip and mat-form-field to a smaller size? Currently, my mat-form-field for chips is really big and almost the same size as other fields, such as the description field, so I want the form fields for chips and the chip itself to be smaller.

<mat-chip-list #chipList>
    <div>
        <mat-chip *ngFor="let superTag of superTags" [selectable]="selectable" [removable]="removable"
            (removed)="remove(superTag)">
            <img class="super-icon" src="/assets/images/icons/super-tag-icon.svg">
            {{superTag.tag}}
            <mat-icon matChipRemove *ngIf="removable" matTooltip="Remove a super tag">cancel</mat-icon>
        </mat-chip>
    </div>
    <div>
        <input matInput  #input [(ngModel)]="tagIn" [formControl]="tagCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="addTag()">
        <!-- <img class="icon" src="/assets/images/icons/chevron-down-icon.svg" alt="down"> -->
    </div>
</mat-chip-list>

.form {
    // display: flex;
    width: calc(100% - 80px);
    height: 10px;
}

.icon {
    margin-top: -12px;
}

.super-icon {
    width: 15px;
    margin-right: 8px;
}
.is-loading ::ng-deep .mat-option-text {
    display: flex;
    justify-content: center;
}

Answer 1

You can decrease the padding values. For me, this worked:

mat-chip {
  padding: 4px 9px !important;
}

Adjust the values accordingly. Also, you can change the font-size if needed.

Answer 2

This is the approach I used:

:host ::ng-deep .mat-chip-list-wrapper mat-chip {
  padding: 0 8px;
}