Aligning icon class - css

Question

As you can see by the image. The icon sits high. Any margin or padding I seem to try moves the text box down with it. With it positioned extra high, it also pushed the search text up. Any suggestions on how to fix?
I just want the search icon to be the same height and even with the search box and not mess with the label text.
.icon-btn {
padding: 0;
margin: 0;
display: inline-block;
height: 26px;
}
.icon-magnifier-dark:before {
background-color: white;
border: solid;
content: "\e035";
color: #color-light;
font-family: outlinedFont;
font-style: normal !important;
font-size: 20px;
line-height: 1;
box-sizing: border-box;
}
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label for="Search" style="">Search</label>
<input type="text" name="Search" id="Search" size="10" style="" />
<a class="icon-btn" href="#" style="">
<i class="icon-magnifier-dark" style=""></i>
</a>
</div>

Answer 1

I think some other CSS might be overriding or changing the aligning, so you should check your full CSS once. I checked your JSFiddle which you provided in comment on one of the answer, I saw the aligning was OK in the Fiddle.

Answer 2

change font-size
font-family: outlinedFont;
font-style: normal !important;
font-size: 15px;
line-height: 1;
box-sizing: border-box;
}

Answer 3

You made it so difficult. Please Check this code below...
HTML:
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label for="Search" style="">Search</label>
<input type="text" name="Search" id="Search" size="10" style="" />
<a class="icon-btn" href="#" style="">
<i class="icon-magnifier-dark" style=""></i>
</a>
</div>
Css:
.icon-btn {
display: inline-block;
width: 26px;
height: 26px;
background-color: red;
text-align: center;
padding:5px;
padding: 3px;
box-sizing: border-box;
}
.icon-magnifier-dark:before {
content: "\e035";
font-family: outlinedFont;
font-style: normal;
}
input[type="text"]{
width:150px;
height:26px;
vertical-align:top;
box-sizing: border-box;
margin-right: -5px;
}
Check the demo on jsfiddle