Icons inside input field borders

Here is a sample input with validation and additional icons. They will be shown on validation.

              <mdb-form-control>
            <input
              mdbValidate
              mdbInput
              type="text"
              id="form1"
              class="form-control"
              formControlName="basicFirstName"
              required
            />
            <i
              *ngIf="
                basicFirstName?.invalid && (basicFirstName?.dirty || basicFirstName?.touched)
              "
              class="fa-solid fa-circle-exclamation icon"
              style="color: #dc4c64;"
            ></i>


            <i
              *ngIf="
                basicFirstName?.valid && (basicFirstName?.dirty || basicFirstName?.touched)
              "
              class="fa-solid fa-check icon"
              style="color: #14a44d;"
            ></i>
            <label mdbLabel class="form-label" for="form1">First name</label>
            <mdb-error
              *ngIf="
                basicFirstName?.invalid && (basicFirstName?.dirty || basicFirstName?.touched)
              "
              >First name is required</mdb-error
            >
            <mdb-success
              *ngIf="
                basicFirstName?.valid && (basicFirstName?.dirty || basicFirstName?.touched)
              "
              >Looks good!</mdb-success
            >
          </mdb-form-control>

• .scss file :

  .icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);}