How to customize any icon in Shopware 5?

We are going to change the Wishlist heart icon into an eye icon in the shopware 5 header. Our shopware 5 header icon looks like this:

We want to replace the heart icon with eye icons like below.

To customize the icon in Shopware 5 follows the following steps.

Step 1: Go to the shopware theme directory of your website.

Step 2: Create the new sub-directory called info.tpl

File Structure:–

/themes/Frontend/Custom/widgets/checkout/info.tpl

Note: Custom directory is a theme that I created already.

Step 3: Add this code in info.tpl file.

{extends file="parent:widgets/checkout/info.tpl"}

{block name="frontend_index_checkout_actions_notepad"}
	<li class="navigation--entry entry--notepad" role="menuitem">
		<a href="{url controller='note'}" title="{"{s namespace='frontend/index/checkout_actions' name='IndexLinkNotepad'}{/s}"|escape}" class="btn">
			<i class="icon--eye"></i>
			{if $sNotesQuantity > 0}
				<span class="badge notes--quantity">
					{$sNotesQuantity}
				</span>
			{/if}
		</a>
	</li>
{/block}

Note:- Clear the cache and look at the header icon it will change into the eye icon

Now we are going to change the plus icons in the footer. You can find this in the mobile view.

Step 4: Create footer.less file in _modules directory.

File Structure:-

themes/Frontend/Custom/frontend/_public/src/less/_modules/footer.less

and add this code into it.

.footer-main {
    .column--headline {
        &.is--active::after {
            content: "\e6cf";
        }

        &::after {
            content: "\e6ce";
        }
    }
}

Create all.less file to import less file. And write this code into it.

@import "_modules/footer";

Results:

Please contact us at manish@bay20.com or call us at +91-8800519180 for any support related to shopware 5. You can also visit the Shopware 5 development page to check the services we offer.