Own Theme - Working with own icons

Question

I want to add Icons for Cart, Wishlist and Account Links in the header.

I placed them /app/design/frontend/vendor/theme/web/images/icons.

I know I can set the icons like (example cart):

.minicart-wrapper .action.showcart:before {
         content: url(http://your-domain.com/.../cart-image.png);

}

But: Whats the URL to the Icons?

First I tried it like

http://your-domain.com/app/design/frontend/vendor/theme/web/images/icons/cart.png. That not worked, but that's okay.

So I checked out how the URL to the logo is and them I could find a working URL:

http://your-domain.com/static/version1533293004/frontend/vendor/theme/store/images/icons/Cart.png.

But there is 'version1533293004', that's probably a problem?

So, how do I get working URLs for my Icons?

Edit: Or can I override the default templates for this in my Theme? I kind of have my troubles with the Magento2 docs, hard to find such specific things.

Answer 1

Ok, not much help here.

So I figured out, that I have to change the template files.

Whishlist: Copy /app/vendor/magento/magento-wishlist/view/frontend/templates/link.phtml to your theme like /app/design/frontend/<vendor>/<themename>/Magento_Wishlist/templates/link.phtml

Now I changed it like:

<li class="link wishlist" data-bind="scope: 'wishlist'">
    <a <?= /* @noEscape */ $block->getLinkAttributes() ?>> <img src="<?= $this->getViewFileUrl('images/icons/Wishlist.png'); ?>"
                                                                alt="<?= $block->escapeHtml($block->getLabel()); ?>"
                                                                title="<?= $block->escapeHtml($block->getLabel()); ?>">
        <!-- ko if: wishlist().counter -->
        <span data-bind="text: wishlist().counter" class="counter qty"></span>
        <!-- /ko -->
    </a>
</li>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "wishlist": {
                        "component": "Magento_Wishlist/js/view/wishlist"
                    }
                }
            }
        }
    }

</script>

My Icon were located at /app/design/frontend/<vendor>/<themename>/web/images/icons/Wishlist.png

For the cart i copied /app/vendor/magento/magento-checkout/view/frontend/templates/cart/minicart.phtml.

Also I had to add some CSS for the cart:

.minicart-wrapper {
          margin-left: unset;

          .action.showcart {
            &::before, &.active::before {
              content:    normal;
            }
            .text {
              position:   unset;
              width:      auto;
              height:     auto;
            }
            .counter.qty {
              position:       relative;
              right:          8px;
              margin-bottom:  8px;
            }
          }
        }

Be careful, you may to change the things different than I did.

I was still not able to change the "My Account" Link. I asked a Question here: How can I change my account link?

But this will probably not get answered, just like this one.

Answer 2

I highly advise not to use .png Icons in your Magento 2 project.

I suggest you to work with Icon Fonts instead.

If you want to learn more how to Create, Implement and Update your own Icons in your Magento 2 project, you can check this explainer video that I have created: https://youtu.be/uT3eL_N1a1g