<div class=' control-group'> <div class='control-group--label'><label class="string required control-label" for="test_form_icon_cap_and_capped_button"><abbr title="required">*</abbr> Icon cap and capped button</label> </div>
<div class="form-inline">
<div class="form-inline--cap">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width: 16px; height: 16px; " class="icon-search">
<g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" class="icon--stroke">
<path d="M12.375,6.375 C12.375,9.6885 9.6885,12.375 6.375,12.375 C3.0615,12.375 0.375,9.6885 0.375,6.375 C0.375,3.0615 3.0615,0.375 6.375,0.375 C9.6885,0.375 12.375,3.0615 12.375,6.375 L12.375,6.375 Z"/>
<path d="M10.61715,10.617225 L17.62515,17.625225" stroke-linecap="round"/>
</g>
</svg>
</div>
<input class="string required" required="required" aria-required="true" type="text" name="test_form[icon_cap_and_capped_button]" id="test_form_icon_cap_and_capped_button" />
<button type="button" class="button button__icon icon--white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 16" style="width: 11px; height: 16px; " class="icon-chevron_right">
<path class="icon--fill" fill="#000000" d="M11.883,7.748 L2.938,0.081 C2.871,0.023 2.787,-0.005 2.695,0.001 C2.607,0.009 2.525,0.05 2.468,0.117 L0.993,1.838 C0.873,1.977 0.889,2.188 1.029,2.307 L7.67,8.001 L1.029,13.692 C0.889,13.811 0.873,14.022 0.993,14.163 L2.468,15.885 C2.534,15.962 2.628,16.001 2.721,16.001 C2.798,16.001 2.875,15.976 2.938,15.921 L11.883,8.255 C11.957,8.192 12,8.099 12,8.001 C12,7.903 11.957,7.812 11.883,7.748" transform="translate(-1)"/>
</svg> </button>
</div>
</div>