Custom icon

Hello,

Is it possible to create a custom icon that will be used on the administration module, since I don’t want to use existing icons?

Are you looking for this?: https://component-library.shopware.com/components/sw-icon/

Actually no. I am looking for a way to create the custom icon that I will use as a component. For example

​
Shopware.Module.register('custom-module', { 
  type: 'plugin', 
  name: 'Custom', 
  title: 'Custom module', 
  description: 'Description for your custom module', 
  color: '#62ff80', 
  icon: 'my-custom-icon', 
});

​

Is there a way to create ‘my-custom-icon’ ?

@ivanb schrieb:

Actually no. I am looking for a way to create the custom icon that I will use as a component. For example


Shopware.Module.register(‘custom-module’, {
type: ‘plugin’,
name: ‘Custom’,
title: ‘Custom module’,
description: ‘Description for your custom module’,
color: ‘#62ff80’,
icon: ‘my-custom-icon’,
});

Is there a way to create ‘my-custom-icon’ ?

I would like to know this aswell :) 

1 Like

I want to know, too.

Over a year now… any new hints on this?

Heyo! I found some solutions for this. I’m not sure if it might be what you’re looking for or if it’s going to help someone. It has been more than 6 months since the last time I used this. Not sure if something has changed

Using own .SVG files:

  • copy .svg to " custom/plugins/[THEME_NAME]/src/Resources/app/storefront/dist/assets/icon/[PACK_NAME]/[ICON_NAME].svg "

  • run " bin/console asset:install "

  • copy logic/block of " vendor/shopware/storefront/Resources/views/storefront/utilities/icon.html.twig "

  • add the path of pack you created to the logic

      {% if pack == 'custom' %} 
         {{ source('@[THEME_NAME]/../app/storefront/dist/assets/icon/custom/[ICON_NAME].svg', ignore_missing = false) }} 
      {% else %}
         {{ source('@[THEME_NAME]/../app/storefront/dist/assets/icon/[PACK_NAME]/[ICON_NAME].svg', ignore_missing = true) }} 
      {% endif %}
    
  • use icon as followed:
    {% sw_icon '[ICON_NAME]' style {'pack': '[PACK_NAME]', 'size': '3x'} %}

Using SVG custom icon-set:

  • copy SVG code & paste it on specific block
  • think about the color & change it in a class style
  • think about the size
  • set color on class & use „fill=„currentColor““ to change icon’s color
  • Bootstrap icons

Using shopware 6 icon-set:

  • Shopware icons

  • Most of the names are wrong on website. Try the main word of the icon. For example if u wanna use the icon „default-action-save“ and you copy the name as it is, it wont work. If you use only the word „save“ for the icon, then the icon will show.

    {% sw_icon '[NAME_OF_SW_ICON]' style {'pack': 'xxx', 'color': '[colors that are defined under the admin/theme site]', 'size': '[sm, lg, etc]' } %}

Set custom icons