Replacing an SVG sourced by W3.org to one hosted on my Shopify account

Solved
Highlighted
Tourist
4 0 0

Hello everyone, could anyone assist me with changing the icons of the profile/login button and the cart icon.

 

I found in the sidebar.liquid where the icon is linked: 

 

% if customer %}
			    				<a href="{{ routes.account_url }}"><span class="icon icon-avatar" aria-hidden="true"  style="height: 28px;">{% render 'theme-symbols', icon: 'avatar' %}</span></a>
		    				{% else %}
			    				<a href="{{ routes.account_login_url }}">
			    				    <span class="icon icon-avatar" aria-hidden="true" style="height: 28px;">{% render 'theme-symbols', icon: 'avatar' %}</span>
                                </a>
                            {% endif %}

 

and in the theme-symbols.liquid where the icon source is defined:

 

{% elsif icon == 'avatar' %}

	<svg class="svg symbol symbol--avatar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 151 151"><path d="M25,158.2V125c0-17.9,13.8-32.5,31.3-33.4l1.9-0.1v-8l-0.5-0.6c-3.8-4.3-5.8-9.6-5.8-15.4V56c0-13.1,10.6-23.7,23.7-23.7
	h0.7c13.1,0,23.7,10.6,23.7,23.7v11.5c0,5.7-2.1,11.1-5.8,15.4l-0.5,0.6v8l1.9,0.1c17.6,1,31.4,15.7,31.4,33.4v33.2H25z M56.7,96.8C42,97.3,30,110.1,30,125.2v28.5h92v-28.5c0-15.3-11.7-27.8-26.7-28.4l-1.6-0.1l-0.4,1.6c-2,8.1-9.1,13.7-17.3,13.7
	c-8.2,0-15.3-5.7-17.3-13.7l-0.4-1.6L56.7,96.8z M63.2,93.7c0,7.2,5.7,13.1,12.8,13.1s12.8-5.9,12.8-13.1V88L86,89.2
	c-3,1.3-6.1,2-9.6,2h-0.7c-3.5,0-6.6-0.6-9.6-2L63.2,88V93.7z M75.6,37.3c-10.3,0-18.7,8.4-18.7,18.7v11.5
	c0,10.3,8.4,18.7,18.7,18.7h0.7c10.3,0,18.7-8.4,18.7-18.7V56c0-10.3-8.4-18.7-18.7-18.7H75.6z"/></svg>

 

 

 

I tried this, but the profile icon just disappeared:

 

{% elsif icon == 'avatar' %}
<img src="https://cdn.shopify.com/s/files/1/0279/9419/4018/files/Profile_icon.svg?v=1590329962">

 

 

I'm obviously doing something wrong and I would appreciate your help. Thanks in advance!

0 Likes
Highlighted
Shopify Expert
498 9 96

This is an accepted solution.

Instead of replacing the value in the theme-symbols snippet, just replace the icon HTML & snippet with your image. May need to fix some styling after this change, but the image should show up now.

{% if customer %}
<a href="{{ routes.account_url }}" aria-label="Account">
<img src="https://cdn.shopify.com/s/files/1/0279/9419/4018/files/Profile_icon.svg?v=1590329962">
</a>
{% else %}
<a href="{{ routes.account_login_url }}" aria-label="Login">
<img src="https://cdn.shopify.com/s/files/1/0279/9419/4018/files/Profile_icon.svg?v=1590329962">
</a>
{% endif %}

 

Highlighted
Tourist
4 0 0

@gina-gregory 

That worked perfectly! Thank you very much!

 

The styling is something I can do, but Liquid is not my strength

0 Likes