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 Answers 2

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>
1
  • 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? Jun 30, 2020 at 16:06
2

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.

You must log in to answer this question.

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