Find a way to be able to replace the icon library

[mparvazi]

We would love to provide a way to replace the current icon library

It isn't easy because:

• Every different library are using a different system to display an icon
• Modules have a strong dependency on material-icons, if we change the current library, every modules icons will break, and the theme will have to override every modules files he use to recover it with their own icons

Here are some ideas we found with the community on slack:

• Use icomoon, so peoples can still regenerate the font using the same name as the current icons
• Use SVGs, so peoples can still replace any SVGs with the same name

Archived

Bootstrap Icons designed for web apps and theme-refacto uses BS5. So why we should not use that?

We can keep material-icons support for modules, but using BS icons for theme.

https://github.com/twbs/icons

https://icons.getbootstrap.com/

IMO material-icons designed for mobile apps (specially Android).

[SharakPL]

Already proposed this and maintainers seemed enthusiastic, but so far the theme is made with material icons support

[Hlavtox]

The problem is that all modules count on material icons. :( We will need to think about a way to somehow make it work.

Otherwise, I like boostrap icons, they are a nice refresh from material and fontawesome, something new. 👍

[NeOMakinG]

Already proposed this and maintainers seemed enthusiastic, but so far the theme is made with material icons support

Because of what @Hlavtox said, we need to support material icons by default, but we can find a way to support multiple icons lib...

I asked the community about some things on slack, I'll add what we spoke about to this issue later

@Oksydan may be interested in this

[SharakPL]

IMO it would be better to use <symbol>s and svgs for icons instead of any icon font.

1. Only needed icons, not whole icon font.
2. Only 1 file for icons (tpl) instead of whole set (woff, woff2, etc.).
3. Symbols are loaded by targeting ID so it's very easy to change icons for whole theme. No need to update class names in multiple files to switch to different icon font like it is now.

[mparvazi]

Font Awesome uses SVG sprites but Material Icons and Bootstrap Icons have one SVG file for each icon.

[NeOMakinG]

Yeah this is what I was thinking @SharakPL but if we do this, we break the display of every module using icons, I'm not sure that we want to add more difficulties for the moment and reduce the adoption of the theme :/

[SharakPL]

Breaks are inevitable and there won't be better moment for changes like this. All native modules should get new major version.

We could also make a module to handle compatibility with several old libraries including material icons, uislider, jquery, etc. When user is certain none of the modules and theme use these then it would be easy to just disable the library or uninstall the module completely.

[NeOMakinG]

Mmmh, this module could be a great idea, because icons lib is not the only one we don't rely on, jQuery for example could be included in this library too

[SharakPL]

Or it could even be a built-in functionality of Prestashop to handle all libraries in one place and avoid breaking changes like that in the future. Also we should be able to handle these resources in theme.yml, eg.

libraries:
  enable:
    - material-icons:"https://cdn.link"
  disable:
    - jquery

Presta would finally have a way to avoid loading the same library by multiple modules.

[eveneme]

The majority of large software applications use Font Awesome icons, and I would lean towards Font Awesome as well.

[SharakPL]

FA offers only solid versions for free. Breaking all the modules for that is rather pointless. I think we should switch to symbols and allow modules to use them or add new symbols. Otherwise stay with material icons.

Maybe we could use a function for this, eg. instead of <i class="material-icons home"></i> or <i class="material-icons">home</i> or <i class="fa-solid fa-home"></i> we could simply use {icon('home', '2em')} (name and optional size) in the templates and modules. Then icon font would be configurable and it wouldn't matter for any theme or module which font it uses because they would all use the same syntax.

That would probably require major changes throughout the project like making ps10 a new brand eg. PrestaShopX and use the occasion to get rid of all legacy compliance, maybe ditch Smarty for Vue on the front and make new modules eg. psx_mailalerts