Custom Cart SVG icon is showing on desktop web but not on mobile web

Technical Q&A
1

Hi - I am trying to change the cart icon of my shop to a custom SVG but the code below only seems to render on desktop but not on mobile and its driving me insane. I cannot seem to get it to work or find some mobile specific CSS in the shopify code.

Hoping somebody can help me spot an issue either with the SVG code or with how i am thinking about this problem.

<svg id="cart_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 91.8 73.9">
  <defs>
    <style>
      .cls-1 {
        stroke-width: 3px;
      }

      .cls-1, .cls-2, .cls-3 {
        fill: none;
        stroke: #3c4b3f;
        stroke-miterlimit: 10;
      }

      .cls-2 {
        stroke-linecap: round;
      }

      .cls-2, .cls-3 {
        stroke-width: 2px;
      }
    </style>
  </defs>
  <path class="cls-3" d="m30.3,7.2c0,12.8.2,25.7.3,38.5"/>
  <path class="cls-3" d="m66.8,61h-6.1v-2.4c0,0,.5-.6.5-.6l15.1-21.4-6.3-29.3H9.8c-.3-.2-.7-.6-1-1.3-.6-1.3-.3-3.1.9-4.1,1.1-1,2.5-.8,2.8-.8h59.3c.5,0,1.6.4,2.4,1.4.6.8.7,1.6.8,2.4.1,1,0,1.9-.1,2.4-1.4,0-2.8,0-4.2,0"/>
  <path class="cls-3" d="m61.3,58h-11.6s-2.3,0-2.3,0h-.3v-11h-13c-.3-.1-1.3-.5-1.9-1.6-.2-.3-.9-1.5-.4-2.8.6-1.5,2.3-1.9,2.4-1.9h13.4c.1,0,1.7.4,2.4,1.9.6,1.4,0,2.7-.2,2.8-.5.9-1.3,1.3-1.5,1.4-.3,0-.6,0-.9,0"/>
  <path class="cls-3" d="m65.5,51.8c-6.1,0-12.2,0-18.4,0"/>
  <polyline class="cls-3" points="47.1 58.4 47.1 60.2 46.1 61.2 38.7 61.2"/>
  <path class="cls-3" d="m76.7,36.5l12,5.6c.4.4.7.9,1,1.6.7,1.7.3,3.3,0,4.6-.1.6-.4,1.3-.7,2.1h-5.5"/>
  <path class="cls-3" d="m35.1,40.5v-3.7c.4,0,1.5,0,2.5-.8.9-.7,1.1-1.6,1.3-2.2.2-.6.3-1.6-.6-4.8-1.1-4.1-1.9-4.6-2.3-4.8-.7-.3-1.5-.3-2.3-.2-1.3.1-2.2.5-2.8.9,1,5,1.7,8.6,1.9,9.9,0,.2.1.8.5,1.3.5.6,1.3.7,1.8.7"/>
  <path class="cls-3" d="m29.8,25.3c-.4-.3-1.1-.8-2-1.1-.7-.2-1.5-.5-2.4-.2-1.4.5-2,2-2.1,2.3-.8,2.6-1.2,4.7-1.4,6.2-.1,1.1-.2,1.9.3,2.8.7,1.3,2.2,1.7,2.8,1.9h2.5l2.4-11.9"/>
  <path class="cls-3" d="m25.9,37.7c0,1.1,0,2.2,0,3.4.2,0,1.7,0,2.5.9.5.7.5,1.5.4,2.5,0,.9-.1,1.8-.8,2.4-.9,1-2.3.9-2.6.9h-11.3c-.3,0-1.4,0-2.4-.8-.2-.2-1.2-1-1.3-2.4,0-.3-.1-1.6.9-2.6.8-.7,1.7-.8,1.9-.8,4,0,8,0,11.9,0"/>
  <path class="cls-3" d="m13.2,48.1v12.9H3.1c-.3,0-.8-.3-1.2-.7-.9-.9-1.1-2.3-.6-3.4.5-1.3,1.8-1.8,2.3-2,1.4-.6,2.3-.3,4.8-.1,1.1,0,2.6.2,4.5.1"/>
  <path class="cls-3" d="m4.4,54.1v-15.7c.2-1,.7-3.4,2.6-5.3.4-.4,1.4-1.3,2.8-2,1.8-.8,3.5-.9,4.4-.9,2.6,0,5.2,0,7.8,0"/>
  <line class="cls-3" x1="72.1" y1="42.7" x2="60.1" y2="31"/>
  <line class="cls-2" x1="56.9" y1="33.6" x2="62.8" y2="27.8"/>
  <circle class="cls-1" cx="26.7" cy="61.3" r="11"/>
  <circle class="cls-3" cx="27.2" cy="61" r="4.5"/>
  <circle class="cls-3" cx="79.3" cy="61" r="4.5"/>
  <circle class="cls-1" cx="79.3" cy="61" r="11"/>
</svg>
2

For context this is the CSS under base.css for the icon itself

.header__icon–cart .icon {
height: 30px;
width: 30px;
padding: 1px;
}

.header__icon–cart {
position: relative;
margin-right: -1.2rem;
}

and this is the code from header.liquid

{%- liquid if cart == empty render 'icon-cart-empty' else render 'icon-cart' endif -%} {{ 'templates.cart.cart' | t }} {%- if cart != empty -%}
{%- if cart.item_count < 100 -%} {{ cart.item_count }} {%- endif -%} {{ 'sections.header.cart_count' | t: count: cart.item_count }}
{%- endif -%}
3

Hey @Kasje , I am facing the same issue. My cart icon renders on desktop website but not on mobile website. Can you help me with the solution if you found any?