How to have both Icon and text inside a button in LWC

Question

I need to display a button which will display a text along with icon. I tried similar to below code

<lightning-button label="Delete">
    <lightning:icon icon-name="action:delete" size="small" class="icon">
    </lightning:icon>
</lightning-button>

But its displaying button with only text inside it. Is there any way to add both text and icon inside the button?

Answer 1

You just need to specify the label as well as the icon-name in the button.

<lightning-button
    variant="success"
    label="Approve"
    title="Approve"
    onclick={handleApprove}
    icon-name="utility:approval"
    class="slds-p-around_xxx-small">
</lightning-button>