Как настроить текстовые поля ввода материала, чтобы сделать его более компактным?

Да, вы можете этого добиться. Вы не поделились своим кодом, поэтому я не могу его изменить, но если вы хотите настроить его, вы можете сделать что-то вроде этого. Это означает, что вам нужно добавить mat-label за пределами mat-form-field, которого у вас нет.

 <div>
    <p>
      <mat-label>First Name </mat-label>
      <mat-form-field appearance = "outline">
        <input matInput />
      </mat-form-field>
    </p>

    <p>
      <mat-label>Last Name</mat-label>
      <mat-form-field appearance = "outline">
        <input matInput />
      </mat-form-field>
    </p>
  </div>

::ng-deep .mat-form-field-outline-start {
  border-radius: 0 !important;
  min-width: 30px !important;
}

::ng-deep .mat-form-field-outline-end {
  border-radius: 0 !important;
  min-width: 30px !important;
}

Пример Stackblitz V-6

Пример Stackblitz V-7

Это также влияет на некоторые другие правила CSS, но обновите таблицу стилей вашего компонента, добавив соответствующую переменную CSS:

:host {
  --mdc-outlined-text-field-container-shape: 0px;
}

Пример Stackblitz V-17