0

I'm trying to render a button with an icon just next to the text, unfortunately, the icon doesn't show even if it uses the space next to the text.

<template>
    <button class="slds-button slds-button_neutral">
        <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
            <use xlink:href="/assests/icons/utility-sprite/svg/symbols.svg#download"></use>
        </svg>Button Neutral
    </button>
</template>

I tried also using _slds instead of assets in the path.

Anyone can help me with this, please?

2

Instead of writing custom HTML, you an use the lightning-button base component:

<lightning-button variant="base" 
    label="Button Neutral" 
    icon-name="utility:download" 
    class="slds-m-left_x-small"></lightning-button>

If you rather want to use your own HTML for some specific reason, use the button example's markup from the SLDS documentation:

<button class="slds-button slds-button_neutral">
<svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#download"></use>
</svg>Button Neutral</button>
| improve this answer | |
  • thanks for your help, I need to use a custom svg for the button and also when I use the button from SLDS documentation the button and the text on it renders but not the icon and I don't understand why, any ideas? – Matteo Mattiussi Jun 30 at 16:06
1

The correct approach is the one Raul describes. However, if for whatever reason you did not want to use the lighting-button component (or you wanted to display an SVG outside of a component), you can display an SVG with the following LWC code:

<lightning-icon icon-name="utility:download" alternative-text="Download" 
    title="Download" size="x-small"></lightning-icon>

See documentation here.

| improve this answer | |

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.