2

LWC lightning-button icons are too low relative to button label. For example...

<lightning-button-group class="slds-m-top_x-small slds-m-bottom_x-small slds-align_right">
  <lightning-button label="Add" icon-name="utility:add"></lightning-button>
  <lightning-button label="Delete Selected" icon-name="utility:delete"></lightning-button>
</lightning-button-group>

enter image description here

Odd that Salesforce does not vertically-align icons with the button label.

To override the behavior, I would normally do something like this...

svg.slds-button__icon {
  position: relative;
  top: -2px;
}
/* or... */
svg.slds-button__icon {
  margin-bottom: 4px;
}

The Local Development Server appears to strip this out (and I know restyling slds classes is not recommended per the docs).

Styling hooks appear to be the recommended way to do it but...

  1. Setting a custom CSS variable on :host breaks the Local Development Server. This seems to be a known issue Salesforce is unwilling to fix and I'm not sure how to workaround that problem.
  2. Even if #1 worked, I am not seeing categories and properties for --slds-c-icon- that let me set the bottom margin or make the icon a relative position.

Do I need to create my own component based on the template for the lightning-button or is there an easier way to get the result I want?

2 Answers 2

1

You can use CSS custom properties to override the styles for the lightning-button component. Custom properties are part of the CSS spec and are scoped to the component.

Here's how you could adjust the position of the icon relative to the label:

<template>
  <lightning-button label="Add" icon-name="utility:add">
  </lightning-button>
</template>

<style>
  lightning-button {
    --lwc-button__icon-position: relative;
    --lwc-button__icon-bottom: 4px;
  }
</style>

You can find the list of available CSS custom properties for lightning-button in the Lightning Web Components documentation.

Note that customizing the styles of a standard component can impact the look and feel of your app, so it's important to consider the consequences of doing so and whether it's necessary for your particular use case.

2
  • Is there a way to make that work in the LWC Local Development Server? As mentioned, it errors out on CSS custom properties. Feb 12, 2023 at 21:47
  • This did not work for me. Feb 18, 2023 at 13:37
0

As there appears to be no styling hook (CSS custom property), overriding the styling of a child component (lightning-button) requires CSS to be explicitly loaded from a static resource by each component.

  1. Create a file /force-app/main/default/staticresources/styles.css...
button.slds-button svg.slds-button__icon {
  position: relative;
  top: -2px;
}
  1. Create a metadata file /force-app/main/default/staticresources/resource-meta.xml...
<?xml version="1.0" encoding="UTF-8"?>
<StaticResource xmlns="https://soap.sforce.com/2006/04/metadata">
  <contentType>text/css</contentType>
</StaticResource>
  1. For LWC components that need to display the icon shifted upward, add this to their JavaScript file...
import { LightningElement } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import styles from '@salesforce/resourceUrl/styles';

export default class Example extends LightningElement {
  async connectedCallback() {
    await loadStyle(this, styles); // loads static resource
  }
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .