0

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:

enter image description here

Expected as are here:

enter image description here

2

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.