I want to add a search button to the form, like in the screenshot below and I have the following code that I found in the documentation.

enter image description here

        <div class="slds-form-element">
        <label class="slds-form-element__label" for="text-input-id-1">Input Label</label>
             <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left-right">
                <svg class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default" aria-hidden="true">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
        <input type="text" id="text-input-id-1" placeholder="Placeholder text…" class="slds-input" />
            <button class="slds-button slds-button_icon slds-input__icon slds-input__icon_right" title="Clear">
                <svg class="slds-button__icon slds-icon-text-light" aria-hidden="true">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#clear"></use>
                <span class="slds-assistive-text">Clear</span>

But when saving this code, I get a message: enter image description here

The problem is that I need to pre-save the button icons and specify their location in the tag, or this tag cannot be used in the aura component and must be done somehow differently? Explain in more detail for the "teapot". I just started learning Salesforce ...

1 Answer 1


Lightning doesn't support <svg> and <use> tags. There is already an answer for this question Trying to utilize “use” tag lightning component, what is the workaround?

So in your example you can utilize standard Lightning tag 'lightning:icon':

<lightning:icon iconName="utility:search" alternativeText="Search" title="Search" size="small"/>

The full list of available icons you can find in SLDS documentation page

You must log in to answer this question.

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