SVG icon inside commandbutton (in VF page) does not show up. Instead it appears next to commandbutton

Question

This is the code for commnad button in the Visualforce page.

<apex:commandButton 
    action="{!searchEmps}" 
    styleClass="slds-button slds-button_brand slds-button__icon" 
    Value="SEARCH" > 
    <svg class="slds-button__icon" 
         aria-hidden="true"> 
        <use xlink:href="{!URLFOR($Resource.SLDS,'/SLDS_Icons/utility-spr‌​ite/svg/symbols.svg#‌​search')}">
    </use>
  </svg> 
</apex:commandButton>

Answer 1

apex:commandButton doesn't support what you're trying to do here - you can embed text in the value attribute or link to an image with the image attribute. I'd suggest instead you make it an apex:commandLink, and style it as a button.

Answer 2

<apex:commandLink
    action="{!searchEmps}"  
    Value="SEARCH" > 
    <svg class="slds-button__icon" 
         aria-hidden="true"> 
        <use xlink:href="{!URLFOR($Resource.SLDS,'/SLDS_Icons/utility-spr‌​ite/svg/symbols.svg#‌​search')}">
    </use>
  </svg> 
</apex:commandLink>

Use this code and style the link according to your requirements.