How to add Search Icon next to my label?

Question

Hi I am working in Angular 4 designing using bootstrap 4. I tried to add search Icon at the end of my label.

Codings below:

<div class="row ">
  <div class="form-group col-lg-2"></div>
  <div class="form-group col-lg-4">
    <label class="Bold">Location Id </label>
    <input type="text" class="form-control"  name="LocationId" >
    <span class="input-group-btn">
      <button class="btn btn-info btn-md" type="button"><i class="fa fa-search"></i></button>
    </span>
  </div>
  <div class="form-group col-lg-4">
    <label class="Bold">Description </label>               
    <input type="text" class="form-control" name="description">
  </div>
  <div class="form-group col-lg-2"></div>
</div>

but it comes like the attached image. How to add icon at the end of label. Is any problem with my coding?

Answer 1

Try to make use of input-group component of bootstrap4

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="form-group">
        <label>Username</label>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon2">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button">Go</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>