Can I have both icon and text in the lightning button icon?

In Salesforce Lightning, you can have both an icon and text in a button using the lightning-button component. This can be achieved by using the icon-name attribute to specify the icon and placing the text content within the button tags. Additionally, you may need to use CSS to align the icon and text properly.

Here’s an example of how to create a button with both an icon and text:

In this example:

• The variant="brand" attribute styles the button.
• The icon-name="utility:add" attribute specifies the icon to be used.
• The label="New Record" attribute provides the text that will appear on the button.

If you need more control over the positioning of the icon and the text, you can use the lightning-button-icon component along with custom styling. Here’s how you can do it:

        New Record

In this example:

The lightning-button-icon component is used to display the icon.

The text "New Record" is placed in a span element next to the icon.

Custom CSS is used to align the icon and text horizontally and add some spacing between them.

This approach gives you more flexibility in styling and positioning the icon and text within the button.