SVG Icon button size not rendering as x-small

Question

I want to render x-small size of SVG Icon used as buttons but they are getting rendered as medium no matter what I do. Please can somebody help me how to make them x-small. Please find code and images that I require:

I have tried the code mentioned here but its not working:

https://www.lightningdesignsystem.com/components/button-icons/#flavor-icon-size-button-icon-size-x-small

code:

    <div class="slds-col">
        <button aura:id="undoButton" class="slds-button slds-button--icon slds-hide" onclick="{!c.onUndo}" >
            <c:SVGIcon svgPath="/resource/SLDS214/assets/icons/utility-sprite/svg/symbols.svg#undo" class="slds-button__icon slds-button__icon--x-small " assistiveText="Undo" category="utility"/>
        </button>
        <button aura:id="editButton" class="slds-button slds-button--icon slds-show" onclick="{!c.onEdit}">
            <c:SVGIcon svgPath="/resource/SLDS214/assets/icons/utility-sprite/svg/symbols.svg#edit" class="slds-button__icon slds-button__icon--x-small " assistiveText="edit" category="utility"/>
        </button>
    </div>

Actual:

Expected as are here:

Answer 1

Got how to do it. lightning:button should be used. Following is the markup:

<lightning:button aura:id="undoButton" variant="base" onclick="{!c.onUndo}" iconName="utility:undo" iconPosition="right" class="slds-button slds-button--icon slds-hide"/>
<lightning:button aura:id="editButton" variant="base" onclick="{!c.onEdit}" iconName="utility:edit" iconPosition="right" class="slds-button slds-button--icon slds-show"/>

Still have to work on the 'onHover type change to dark/fade', but that will be done :)