place icon inside of outlined textbox

[imre horvath]

Hi,

I'm trying to place an icon inside of an outlined (material theme) textbox. I read the docu and tried many combinations of the css classes, but I didn't manage to get it work. This is the markup:

<div class="e-input-group e-float-icon-left">

    <div class="e-input-in-wrap">

      <span class="e-input-group-icon e-icons e-user"></span>

      <ejs-textbox

        cssClass="e-outline"

        placeholder="First Name"

        floatLabelType="Auto"

      ></ejs-textbox>

    </div>

  </div>

And this is how it looks like:

I have two another questions:

1. In your docu you use simple input classes. But in other places you use f. e. ejs-textbox. Why this?
2. I'm unable to show the user icon (e7b4) nor the key icon (e77f). My css should be OK, f. e.:

.e-user::before {

content: "\e993";

}

But if I change the content, no icon is showing.

[Sureshkumar P]

Hi Imre,

We can add the icons to the textbox component by using the addIcon method. To know more about the addIcon method please refer to the documentation section.

API Documentation: https://ej2.syncfusion.com/angular/documentation/api/textbox#addicon

find the sample here: https://stackblitz.com/edit/angular-tu1zjk?file=app.component.html

Regards,

Sureshkumar P