Topic: Icons inside input field borders

Bakke premium asked 6 months ago


Is there an easy ability to overlay icons inside of an input field's border?

Something akin to this: Example of icon within an input field

Resources (screenshots, code snippets etc.)


Rafał Seifert staff answered 6 months ago


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%);}
    


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 5.1.0
  • Device: n/a
  • Browser: n/a
  • OS: n/a
  • Provided sample code: No
  • Provided link: No