For example in this site a code like following will make a result like screenshot:
.email1-group .controls:before {
content: "\f0e0";
font: normal normal normal 14px/1 FontAwesome;
float:left;
width:30px;
padding-top:7px;
text-align: center;
background:#ddd;
border:1px solid #ccc;
border-right:0px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
height:32px;
}
.email1-group .controls input{
width:calc(100% - 30px) !important;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
display:block;
}
But keep in mind that in this code we use Font-Awesome (Joomla default template uses icomoon) and the height of the icon box is the same of the input (so it is related to your template)