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:



    <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 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"/>


enter image description here

Expected as are here:

enter image description here

1 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 :)

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .