Angular Material - simple login form

I'm new to using Angular Material for styling (I'd normally be using bootstrap) and I'm building a very simple responsive login box. I've been able to put it together based on examples I've found online and it looks like this:

It uses a mat-card with flex layout. I used CSS to display mat-icons on the left hand side of the textbox in the sample above as follows:

HTML

<mat-card>
    <mat-card-title>Login</mat-card-title>
    <mat-card-content>
      <form [formGroup]="form" (ngSubmit)="submit()">

        <p>
          <mat-icon mat-list-icon>mail_outline</mat-icon>
          <mat-form-field>
            <input
              type="text"
              matInput
              placeholder="Username"
              formControlName="username"
              required
            />
            <mat-error>
              Please provide a valid email address
            </mat-error>
          </mat-form-field>
        </p>

        ...

      </form>
    </mat-card-content>
</mat-card>

CSS

  :host {
    display: flex;
    justify-content: center;
    margin: 100px 0px;
  }

  .mat-form-field {
    min-width: 300px;
    margin-right: 10px;
    margin-left: 10px;
  }

  mat-card-title,
  mat-card-content {
    display: flex;
    justify-content: center;
  }

  mat-icon {
    float: left;
    opacity: 0.5;
    margin-top: 14px;
  }

Here's an example on StackBlitz: https://angular-material-login-form-ktnizs.stackblitz.io

My problem is - when the screen is narrow, the icons (which are set to float left) wrap a new line and I want to keep them in position as the top image shows.

Is this possible using Material classes without having to write custom css?