how to change shopify search icon to my own .svg icon (in Dawn 14.0)

[PedroPrado]

Please, can anyone help me.
How do I change all Shopfy search icons to my own icons? I've looked everywhere and none of them work. It turns out that if I change some codes to mine, either the icon doesn't appear or my store is completely blank.
My theme is Dawn 14.0.
Thank you very much for your attention. I hope help.

[Darshanp712 · Accepted solution]

Hello @PedroPrado, To change this search icon in Dawn 14.0.0 please follow the steps below.

Edit code -> sections -> header.liquid -> check this svg with "#icon-search" You can change it here.

Edit code ->  Sippets -> header-search.liquid -> Here that svg is called by that id "#icon-search". 

Feel free to reach out if you have any questions or need assistance.

Best Regards.

[Dan-From-Ryviu · Accepted solution]

Hi @PedroPrado 

You can go Online Store > Themes > Edit code, open header-search.liquid file, search "icon-search", replace SVG code in this file with your own SVG

[Darshanp712 · Accepted solution]

Hello @PedroPrado, To change this search icon in Dawn 14.0.0 please follow the steps below.

Edit code -> sections -> header.liquid -> check this svg with "#icon-search" You can change it here.

Edit code ->  Sippets -> header-search.liquid -> Here that svg is called by that id "#icon-search". 

Feel free to reach out if you have any questions or need assistance.

Best Regards.

[PedroPrado]

Hello. Thanks for responding.
When I do it this way my website is completely blank and the search icon doesn't even appear.
Thank you for your attention. I hope for your help.

[Darshanp712]

@PedroPrado, Please share the preview link.

Thanks!

[PedroPrado]

Sorry, but I don't know how to do this. 

[Darshanp712]

@PedroPrado See the screenshot below click on that green button and in the pop-up you will get a URL. Please share that URL.

[PedroPrado]

That's it!
thank you for the patience
https://1kxantij1nq6p11s-78296449301.shopifypreview.com

[PedroPrado]

I want to put this svg there:
I don't think it's wrong because I managed to put it on the bag icon.

<svg

   width="2000mm"

   height="2000mm"

   viewBox="0 0 2000 2000"

   version="1.1"

   id="svg1"

   xml:space="preserve"

   inkscape:export-filename="ÍCONE LUPA MAIOR-000000ff-ffffffff-000000ff.jpg"

   inkscape:export-xdpi="25.4"

   inkscape:export-ydpi="25.4"

   sodipodi:docname="ÍCONE LUPA MAIOR PARA O SITE.svg"

   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"

   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

   xmlns="http://www.w3.org/2000/svg"

   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview

     id="namedview1"

     pagecolor="#ffffff"

     bordercolor="#000000"

     borderopacity="0.25"

     inkscape:showpageshadow="2"

     inkscape:pageopacity="0.0"

     inkscape:pagecheckerboard="0"

     inkscape:deskcolor="#d1d1d1"

     inkscape:document-units="mm"

     showborder="false"

     showguides="true"

     inkscape:lockguides="false"

     inkscape:zoom="0.08"

     inkscape:cx="3818.75"

     inkscape:cy="4143.75"

     inkscape:window-width="1920"

     inkscape:window-height="1009"

     inkscape:window-x="1358"

     inkscape:window-y="-8"

     inkscape:window-maximized="1"

     inkscape:current-layer="layer1"

     inkscape:export-bgcolor="#ffffff00" /><defs

     id="defs1" /><g

     inkscape:label="Camada 1"

     inkscape:groupmode="layer"

     id="layer1"><g

       id="g9-6"

       transform="matrix(1.0000444,0,0,1.0000426,-925.00496,-3326.796)"

       inkscape:label="Lupa"><ellipse

         style="fill:#ffffff;fill-opacity:0;stroke:#000000;stroke-width:65;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"

         id="path7-8"

         cx="1851.8973"

         cy="4234.9253"

         rx="331.61343"

         ry="331.70615" /><path

         style="fill:#ffffff;fill-opacity:0;stroke:#000000;stroke-width:95.445;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1"

         d="M 2314.3318,4734.7806 2077.855,4500.8603"

         id="path9-9" /></g></g></svg>

[Dan-From-Ryviu · Accepted solution]

Hi @PedroPrado 

You can go Online Store > Themes > Edit code, open header-search.liquid file, search "icon-search", replace SVG code in this file with your own SVG

[PedroPrado]

When I do it his way, he even changes the icon, but my store is completely white. Look at the photo there.
The blank photo is my website after doing what you said to do.
Thank you for your attention. I wait for your response.

[Darshanp712]

Hello @PedroPrado, The store looks completely fine! It's not in a white color or blank!! See the screenshot below.

[PedroPrado]

That's because I'm back to normal. Let me do the process again, then you can take a look, please.

[PedroPrado]

Look again, please.
https://1kxantij1nq6p11s-78296449301.shopifypreview.com

[Darshanp712 · Accepted solution]

Hello @PedroPrado, The Problem is with your newly added SVG's height and width which are inline attributes of the SVG, whose values equal 2000mm.

Please see the screenshots below.

Before width and height.

After removing width and height.

Please check with these changes.

If I managed to help you then, don't forget to Like it and Mark it as a Solution!
Feel free to reach out if you have any questions or need assistance.

Best regards,

Darshan.

[PedroPrado]

My God, thank you so much for your help and patience! Everything went fine!