PrestaShop 1.6.x. How to manage Material Design icons

This video tutorial will show how to manage Material Design icons in PrestaShop template.

In order to manage icons, you should perform the following steps:

1. First, search for the element in order to find out its class by using Firebug tool that can be enabled with the right click on the screen and selecting Inspect Element from the drop down menu:

   

2. Check the CSS class for the icon that has to be changed:

   

3. Get back to the ‘themes/themeXXXX/css/material-design.css’ file and search for the value you’d like to use instead of default one:

   

4. Open global.css file located in css folder of your template. Paste the CSS class for the icon to the bottom of the file and make sure it has ‘content’ line value.

5. Paste the new content value to the global.css file. Remember to use ‘!important’ to apply CSS modification properly. The final CSS class should look as follows:

   .material-design-shopping232::before {
   				content: "\e002" !important;
   			}  

   

6. Go back to your website and refresh the page with text that you have changed. Now we can see that editing was successful.

Feel free to check the detailed video tutorial below: