[SalesForce] LWC: How to display svg icons

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?

Best Answer

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>
Related Topic