Can I Use Google Material Icons in Divi WordPress?
Being designed with an elegant appearance and remarkable flexibility in use, Divi is a prominent WordPress theme. The major update in Divi integrates an extensive number of templates equal to 800 plus, which involves website templates, landing page templates, and even several segments of a specific page created for a definite purpose. But there are times when the default Divi icons are insufficient to reflect the design needed, and the question arises: can we use Google Material Icons in Divi WordPress?
Absolutely! Google Material Icons can also be used on the Divi WordPress theme by following these instructions accompanied by a little imagination. Let’s explain why you should use Google Material Icons.
Why Use Google Material Icons?
Google Material Design Icons is an extensive and diverse complex of SVG icons created for the material design environment by Google. They are easily adaptable, beautiful to look at on any device, and have low overhead, which means the site is faster and less burdensome.
Here are some key benefits of Google Material Icons:
1. Diverse range of icons for various applications: Android Material Icon fonts contain many icons suitable for almost any application. If you are looking for a store icon for an e-commerce website or a social sharing icon for your social media platform or business website, you are in the right place.
2. Scalability: The file format used is SVG, which enables the big icons to be displayed with high quality on any kind of device without losing quality since they are compatible with mobile phones and desktop computers.
3. Consistency: All icons are scalable and aim to keep with the general appearance and follow Google Material Design recommendations to look harmonious on your websites.
4. Performance: It’s also important to note that Google Material Icons have low interactivity; therefore, using them will not affect your site’s performance.
With that background knowledge on Google Material Icon, it is time we turn to making use of it in Divi WordPress.
Implementing Google Material Icons for WordPress Theme Divi
Step 1: Obtain Google Material Icons
There is no need to worry about sourcing the icons before using them on your Divi website because Google has already done that for you. Visit the Google Icons website (Go to https://www.google.com/fonts/ and input the icon name you want to use). To download the icon, just click the picture, and you will be taken to the version of the icon of your choice. Select the option “SVG” afterwards; the “CSS” option is located at the lower end of the page and clicking on it copies the CSS. By performing this step, a class will be created for the unique icon.
Step 2: Add Custom CSS in Divi
Subsequently, you must paste the CSS code that belongs to the design you selected into the website. This can be done through Divi> Theme Options > Custom CSS or via additional Custom CSS added to your child theme in the style.css file.
To apply the styles on your forms, copy the CSS code provided in Step 1 and paste it into the custom CSS field.
Step 3: Ensure You Use Google Material Icon in the Divi
Now, we are going to add the Google Material icon to your Divi page or in a module. To do this, you may either export the icon to the Divi library and then reuse the icon modules, or add the icon to an individual module such as the Text, Blurb, or Heading modules.
1. Using the Divi library:
- a. Open a new library or work with an already existing library.
- b. Add a Text, Blurb, or Heading module to your layout to achieve that.
- c. From the list of tools available on the left side, go to the module settings → design tab, → scroll down the Icon area.
- d. To customize the look and replace the typical Divi icon with a Google Material Icon, input the CSS class name of the icon we want as the “Icon.”
- e. Click save, and you should close the library item. You can now recycle this icon library item throughout your Divi website.
2. Directly adding the icon to a module:
- a. Choose to navigate to a new or old post, heading, or pages, and insert Text, Blurb, or Heading element.
- b. Find Outcomes and go to the settings; then click the Design tab and look for the Icon field.
- c. Copy the CSS class name of the Google Material Icon you picked into the field named “Icon.”
- d. Press “Save,” and the Google Material Icon will appear on the page or post chosen.
Step 4: More Information About the Icon’s Look
As you’ve learned in this tutorial on adding Google Material Icons to your Divi website, you can use custom CSS to style the icon you want. For instance, you can always alter the icon color and size, or if you wish to add a little animation to the icon, you can. To do this, go to Divi -> Theme Options -> Custom CSS and insert your custom CSS rules.
For example, if you want to change the color of the icon, you can use the following custom CSS code:
“`
.google-material-icon {
color: #your-preferred-color;
}
“`
Bill Yeager, Co-Owner of High Point SEO & Marketing in CT
