How to display a caret in a custom drop down field?

[OptegoVision]

I've created a custom drop down field on my contact form.  Everything is working properly, but I cannot seem to get the little caret that points down to show up.  I've spent probably 5 hours searching Google and the Shopify forums, and all the coding I've found does not work.  It will either make the caret huge, or put it on the line beneath the text.  I've even pulled the svg tag out of the main-addresses.liquid and that code doesn't work either.  Is there anyone that can help me figure out where my code went wrong?

  <div class="field">
    <div class="product">
    <svg style="display: none">
      <symbol id="icon-caret" viewBox="0 0 10 6" style="height: 0.8rem;">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
      </symbol>
    </svg>
  <label for="product" style="visibility: hidden;" class="field__label">Click here to choose a product:</label>
  <select id="product" name="contact[product]" class="field__input select__select" style="font-size: inherit; padding-top: 0.8rem;" id="product" name="contact[product]">
    <option selected disabled required value="">Click here to choose a product:</option>
    <option>EpiGlare&reg; Single Phoropter Kit</option>
    <option>EpiGlare&reg; Binocular Phoropter Kit</option>
    <option>EpiGlare&reg; Handheld Desk Kit</option>
  </select>
  </div>
</div>

[OptegoVision]

I would prefer to keep this here on the community forum, if possible.

[NezClenz]

Hi, I don't know if you've already figured it out but I did the following and it worked: