Design Tips: Creating Attractive Buttons with Icons in LWC

Elevating the user interface (UI) in Salesforce is a breeze when you master the art of designing attractive buttons with icons in LWC. In this comprehensive guide, we’ll deep dive into LWC button design, icon integration in Lightning Components.

HTML Code

<template>
    <div class="slds-m-around_medium">
        <!-- Lightning Button with Icon -->
        <lightning-button
            label="Click Me"
            title="Click Me"
            onclick={handleButtonClick}
            icon-name="utility:favorite"
            variant="brand">
        </lightning-button>
    </div>
</template>

Explanation

Adding an icon to a button in LWC is pretty straightforward. There are a host of attributes available in lightning-button component that you can use, one of them is icon-name that you can use to show icon inside a button of the LWC Component.

All you need to do is provide the category and icon name in the format category-iconname. If you want to know more about SLDS icons read our article on how to Use SLDS Icons in LWC with lightning-icon. This article provides an in depth explanation of how to use SLDS icons, in an easy to understand language.

Learn about lightning-button and its other attributes in the Salesforce Documentation here.

Demo

There are other article related to using icons in LWC, that you might find very useful:

1. Add icon inside an input field LWC
2. Use custom SVG icon in LWC with Static Resource
3. How to Use SLDS Icons in LWC with lightning-icon

Conclusion

Using icons is one of the easiest way to enrich the visual aspect any web UI. If used carefully, it enhances the user experience of any component. You can add icons to almost any element be it an input field, button, header of an article etc. This article covered how we can effortlessly add icons inside a button in LWC Component.

Feel free to utilize the provided code snippets in your personal Salesforce orgs. If you encounter any issues or have suggestions for improvement, please share your feedback in the comments section below. Don’t forget to subscribe to our newsletter for more insightful Salesforce content, and feel free to share this article with your friends if you find it useful.