How to show icon in nbInput

[petertw6235]

Issue type

I'm submitting a ... (check one with "x")

• [ ] bug report
• [x] feature request

Issue description

I saw the example code in nebular website: <input [nbDatepicker]="datepicker" nbInput> <nb-datepicker #datepicker></nb-datepicker> That works fine, but I want to put icon into nbInput like this:

I couldn't find any example about nbIcon in input. Have any ideas about this?

[EvgenyProkopovich]

Perhaps it will help you)

[luischueneuien]

I just added a span

<div class="amount"
    <input fieldSize="small" type="number" class="amount-input" name="total_amount" #total_amount="ngModel" [(ngModel)]="check.total_amount" nbInput fullWidth placeholder="Importe diario">
    <span class="suffix">€</span>
</div>

  .amount {
    display: table;
    border-collapse: separate;
    position: relative;
  }
  .amount-input {
    border-radius: 0.25rem 0rem 0rem 0.25rem;
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 0;
    display: table-cell;
    margin: 0;
  }

  .suffix {
    border-radius: 0rem 0.25rem 0.25rem 0rem;
    padding: 0 12px;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    display: table-cell;
  }

[chakib-mohamed]

Hello , This works as well :

<nb-form-field>
                      <input
                        #dateInput
                        id="date"
                        nbInput
                        placeholder="select a date"
                        [nbDatepicker]="datePicker"
                      />
                      <button nbSuffix nbButton ghost (click)="dateInput.click()">
                        <nb-icon icon="calendar"> </nb-icon>
                      </button>
                      <nb-datepicker #datePicker format="dd\MM\yyyy"></nb-datepicker>
</nb-form-field>

[victorwvieira]

Hello , This works as well :

<nb-form-field>
                      <input
                        #dateInput
                        id="date"
                        nbInput
                        placeholder="select a date"
                        [nbDatepicker]="datePicker"
                      />
                      <button nbSuffix nbButton ghost (click)="dateInput.click()">
                        <nb-icon icon="calendar"> </nb-icon>
                      </button>
                      <nb-datepicker #datePicker format="dd\MM\yyyy"></nb-datepicker>
</nb-form-field>

This is worked, but was necessary put everything inside a <div> with CSS display: flex