Issues with unit 3 icons

HTML/CSS
1

So im trying to follow along and my chevron icon isn’t displaying properly. has anyone else had this issue? i tried to go back and recreate the sprites, but thats not working either. any assistance would be super helpful.

Html

<body>
    <div class="collapsible">
      <header class="collapsible__header">
        <h2 class="collapsible__heading">Item 1</h2>

        <svg class="icon icon--primary">
          <use xlink:href="images/sprite.svg#chevron"></use>
        </svg>
      </header>
      <div class="collapsible__content">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem quia
        saepe pariatur, eius hic quis.
      </div>
    </div>
  </body>
</html>

CSS

.icon {
    width: 40px;
    height: 40px;

}

.icon--small {

    width: 30px;
    height: 30px;
}

.icon--primary {
    fill: var(--color-primary);
}

.icon--white {
    fill: #fff;
}

.icon-container {
    background: #f3f9fa;
    width: 64px;
    height: 64px;
    border-radius: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.icon-container--accent {
    background: var(--color-accent);
    
 }

SVG file

<svg width="0" height="0" class="hidden">
   <symbol id="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51">
    <defs></defs>
    <circle cx="25.5" cy="25.5" r="25.5"></circle>
    <rect x="24.4" y="27.9" width="1.6" height="15.24" rx="0.8" transform="matrix(0.78, -0.63, 0.63, 0.78, -21.26, 15.39)"></rect>
    <rect x="33.3" y="27.9" width="1.6" height="15.24" rx="0.8" transform="translate(24 -21.9) rotate(37.3)"></rect>
  </symbol>
2

From where which part (of the course) and the video/section did you download the SVG from? There’s some issue with the SVG file you’ve shared here.

3

It’s from part 3 of the HTML/CSS course. I’m having the same problem too
Episode 26

4

Will this help here