LWC: How to display svg icons

Question

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?

Answer 1

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>

Answer 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.