Joomla 3.x. How to manage Material Design icons

This tutorial shows how to manage Material Design icons in Joomla 3.x.

Joomla 3.x. How to manage Material Design icons

Material design font is used to display specific icons within Joomla content. They are usually rendered from the file embed to the template structure. Though editing file is not required, as such change can be performed via Joomla admin panel:

1. Open Joomla admin panel and navigate to Content -> Articles section. Find there article to replace the icon for. It is reasonable to filter content using ‘Search Tools’ to simplify the search.

2. Open the article and refer Images and links -> Caption tab in there. That contains ID of the icon; we should update it with another one.

   

3. The icon names (IDs) are stored under the server files. Open them using either FTP or cPanel and locate ‘templates/themeXXXX/css’ folder. Refer ‘linecons.css’ file inside.

   Note: the file name differs depending on the actual material design font used.

4. Open the required file using any HTML editor. Pick the icon you’d like to use instead of default one from the list of available ones. Copy its class name.

   

5. Get back to the Joomla admin panel. Paste the copied class name to the ‘Caption’ tab instead of default one.

   Note: make sure to have no dot in the beginning of the class name

Save changes then. Get back to the site’s front-end to view the results. New icon shows up properly instead of default one.

Feel free to check the detailed video tutorial below:

Joomla 3.x. How to manage Material Design icons