WordPress. How to change material design icons

This tutorial will show you how to change material design icons in WordPress templates.

WordPress. How to change material design icons

Material Design is a full suite of material design icons for easy scalable vector graphics on websites. It is used for some WordPress templates by TemplateMonster.com. Let’s check the way to edit it. There are two ways to update the icons:

1. Using shortcodes;
2. Using CSS.

Let’s check both variants. The first approach shows how to update material design icons using shortcodes.

1. Open WordPress Dashboard and navigate to Pages > All Pages> Home. Locate shortcode lines with material-design icon reference:

   

2. Now let’s open server File Manager and locate ‘wp-content/themes/theme####/material/material-design.css’ file there. Open it to check the content. You’ll find a few variants of each icon there. Search for CSS class corresponding to the new icon and copy its title from the file:

   

3. Paste it instead of default one to the shortcode line in the page and update changes. Update changes to the page and check the site’s front-end.  New icon appears now.

The second approach shows how to update material design icons using CSS.

1. Right click the mouse and use ‘Inspect element’ tool to locate the CSS class for the icon to edit. Copy the CSS class for the arrow.

2. Get back to the WordPress Dashboard and navigate to Appearance > Editor> style.css file. Paste the CSS class for the icon and make sure it has ‘content’ line value.

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

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

   .block_3  .service-box2:after {
     content: "\e11d" !important;
     }

5. Update the style.css file once finished with modifications. Refresh the Home page to view the result.

Feel free to check the detailed video tutorial below:

WordPress. How to change material design icons