Can't add the search icon without messing up the code

HTML/CSS
1

Hi there, I am doing the HTML/CSS course. When I add the sprite.svg#search icon to the domain block of code and save it… all the code below it turns red! By that I mean all the elements change to red. Meaning there is some formatting error. Weirdly, the block of code works fine with or without the svg element in it. Just with it everything below goes red. So it is more of an annoyance than a problem. In the end built the whole website but had to leave out the search icon in the domain block—as adding that would turn all the code markers (div, ul, li, body, etc…) below it red. As far as I can tell my code is the same as Mosh’s. Does anyone know what the problem might be?

    <button class="btn btn--accent">
      <svg class="icon icon--white">
        <use xlink:href="./images/sprite.svg#search"></use></svg
      >Search
    </button>

Thanks,

Daniel

2

@danny1 Did you ever figure this out? I am currently having the same issue.

3

What fixed it for me was putting a single space between the svg component and “Search”. I’m still having some styling issues with the button, but that at least made the red go away.

4

mosh’s secret exercise lol, the SVG had an error from the guy he bought it from.

I ended up saving the image as a jpg and importing it as an img element and just using css to size it and stick it where it needed to go.