add icon to input
<!-- If using Bootstrap -->
<!-- Icon can be put before or after input -->
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">
<!-- Icon or Text here -->
</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
<span class="input-group-text" id="basic-addon1">
<!-- Icon or Text here -->
</span>
</div>
<!-- Pure Css & Html -->
<!-- src: https://stackoverflow.com/a/40261155 -->
<style type="text/css">
#input_container {
position:relative;
padding:0 0 0 20px;
margin:0 20px;
background:#ddd;
direction: rtl;
width: 200px;
}
#input {
height:20px;
margin:0;
padding-right: 30px;
width: 100%;
}
#input_img {
position:absolute;
bottom:2px;
right:5px;
width:24px;
height:24px;
}
</style>
<div id="input_container">
<input type="text" id="input" value>
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</div>