Search Icon Button in Lightning [duplicate]

Question

This question already has an answer here:

• Failed to save undefined: No COMPONENT named markup://svg found : 2 answers

I need a search icon button icon in my compoonent. I have got the code as well. Below is the link from where i have referred the code.

https://www.lightningdesignsystem.com/components/button-icons/

The problem that i am facing is for the svg.

the error says "Failed to save AddressSearch.cmp: No COMPONENT named markup://svg found : [markup://c:AddressSearch]: Source"

If there is no svg. how i create one for this kind of button???

 <button class="slds-button slds-button_icon slds-button_icon-brand" title="Search">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
</svg>
<span class="slds-assistive-text">Search</span>
</button>

Answer 1

You don't need SVG for this. You can use lightning:icon tag for this

<span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right iconheight">
    <lightning:icon class="slds-icon slds-icon slds-icon_small slds-icon-text-default" iconName="utility:search" size="x-small" alternativeText="icon" />
</span> 

Here is your output

The above code will work but in case you need the complete code with css(Note: it include some other stuff as well) , you can found that here.

Answer 2

You need to use the lighting icon, in lighting components, you don't need to use SVG directly.

Just specify icontype:iconname

<lightning:icon iconName="utility:search" alternativeText="XML" />