0

I'm using the lightning-button-icon inside the SLDS button.(Reason : to Change the button color).

enter image description here

button icon is in grey color variant="container" how to change the forward button color to white.

<button class="slds-button slds-button_neutral" style=" border: none;background-color: #04844B;color: white;">Next
<lightning-button-icon icon-name="utility:forward"  variant="container" alternative-text="Settings" title="Settings"></lightning-button-icon>
</button>
  • Try inverse variant – Eric Jun 3 at 7:04
  • inverse variant adding border in Icon – SFDC_Beginner Jun 3 at 7:11
2

You can also use the other simple way by embedding icon in the lightning-button

<lightning-button variant="success" label="Next" title="Next" icon-name="utility:forward" icon-position="right" class="slds-m-left_x-small"></lightning-button>

More information : https://developer.salesforce.com/docs/component-library/bundle/lightning-button/example

                                 OR

In your case : Use variant="bare-inverse" in lightning-button-icon

<button class="slds-button slds-button_neutral" style=" border: none;background-color: #04844B;color: white;">Next
<lightning-button-icon icon-name="utility:forward"  variant="bare-inverse" alternative-text="Settings" title="Settings"></lightning-button-icon>
</button>
| improve this answer | |
  • I want to have some custom color in this button – SFDC_Beginner Jun 3 at 7:10
  • Please see the updated answer then – Avi Rai Jun 3 at 7:16
  • Thanks, It's working as expect. :) – SFDC_Beginner Jun 3 at 7:21

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.