Search Icon

[ti7]

How do I change the icon search icon on dawn  

[Liam]

Hi Ti7,

The search icon in Dawn is a SVG symbol element that's hardcoded into the theme so changing it is not as simple as adding a new image file - you would need to either use a different SVG and manually add that code to the theme, or implement a different technique for displaying an icon (like using an SVG file that's stored in the /assets directory). 

You can see where the icon is being hardcorded here on the most recent version of Dawn - you could replace this with code for an SVG, or remove the native approach and upload an SVG to the /assets directory and use the asset_img_url filter to render it on the header. 

[ti7]

Hi when I do this and replace with the svg code (I will put below) the search icon just disappears however when i hover over where it was i can still click on it and when i do click on it it allows me to search.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

   width="50%" viewBox="0 0 73 68" enable-background="new 0 0 73 68" xml:space="preserve">

<path fill="#FCFCFC" opacity="1.000000" stroke="none"

  d="

M48.000011,69.000000

  C32.000008,69.000000 16.500008,69.000000 1.000006,69.000000

  C1.000004,46.333336 1.000004,23.666672 1.000002,1.000006

  C25.333330,1.000004 49.666660,1.000004 74.000000,1.000002

  C74.000000,23.666664 74.000000,46.333328 74.000000,69.000000

  C65.500008,69.000000 57.000011,69.000000 48.000011,69.000000

M62.842579,60.713898

  C63.186832,61.075825 63.541203,61.428722 63.873634,61.801201

  C65.578568,63.711536 67.065552,64.965797 69.544548,62.399937

  C72.092712,59.762478 70.349724,58.464310 68.673691,56.690018

  C64.340820,52.103138 60.114941,47.415192 55.676842,42.583069

  C64.978333,27.934635 58.153759,14.822629 49.814156,8.518560

  C40.502445,1.479659 26.195396,2.667248 17.886658,11.121199

  C9.703974,19.446890 8.516936,33.583687 15.439780,42.711170

  C22.299286,51.755146 35.274063,57.628830 49.969311,48.437386

  C54.157173,52.424561 58.250973,56.322178 62.842579,60.713898

z"/>

<path fill="#0D0D0D" opacity="1.000000" stroke="none"

  d="

M62.593674,60.466850

  C58.250973,56.322178 54.157173,52.424561 49.969311,48.437386

  C35.274063,57.628830 22.299286,51.755146 15.439780,42.711170

  C8.516936,33.583687 9.703974,19.446890 17.886658,11.121199

  C26.195396,2.667248 40.502445,1.479659 49.814156,8.518560

  C58.153759,14.822629 64.978333,27.934635 55.676842,42.583069

  C60.114941,47.415192 64.340820,52.103138 68.673691,56.690018

  C70.349724,58.464310 72.092712,59.762478 69.544548,62.399937

  C67.065552,64.965797 65.578568,63.711536 63.873634,61.801201

  C63.541203,61.428722 63.186832,61.075825 62.593674,60.466850

M46.477211,43.136162

  C47.217918,42.471321 48.011536,41.856236 48.690983,41.133778

  C54.269279,35.202385 55.477745,27.763067 52.071667,20.508423

  C48.721302,13.372456 41.553722,9.312929 33.450798,9.962065

  C26.163872,10.545830 20.000595,15.696483 17.717077,23.110743

  C15.521933,30.238064 17.828646,38.159924 23.758797,42.738766

  C30.862686,48.223881 38.338730,48.294731 46.477211,43.136162

z"/>

<path fill="#FCFCFC" opacity="1.000000" stroke="none"

  d="

M46.206192,43.394558

  C38.338730,48.294731 30.862686,48.223881 23.758797,42.738766

  C17.828646,38.159924 15.521933,30.238064 17.717077,23.110743

  C20.000595,15.696483 26.163872,10.545830 33.450798,9.962065

  C41.553722,9.312929 48.721302,13.372456 52.071667,20.508423

  C55.477745,27.763067 54.269279,35.202385 48.690983,41.133778

  C48.011536,41.856236 47.217918,42.471321 46.206192,43.394558

z"/>

</svg>

[Liam]

The SVG code you're sharing here is a slightly different implementation as it's not using the <symbol> tag, so swapping our the native version for this likely would cause an error. It's also a much more complex looking SVG compared to the very basic one that Dawn uses, so I'd recommend including it as a file rather than coded into the theme file. There's info in this forum post on how to add and display an SVG to a theme, but you'll need to modify it a bit so that the icon shows up exactly where you want. 

[ti7]

Ive tried to modify it but still getting nowhere could you help with what parts i need to modify and what to do