Embed Material Design Icons to Divi

Last modified Aug 5, 2021

Difficulty Intermediate

Language CSS, HTML

Category Design

Watch Tutorial

Material Design
WP and Divi Icons
Divi Space Membership

Transcript:

Hey everybody, David here from Divi Space.

Google’s Material icons are beautiful and free to use personally or commercially. These icons are available in several formats and are suitable for different types of projects. Today I’m going to show you two ways you can start using these icons on your Divi Website. Alright, let’s go!

The easiest way to set up icon fonts is through Google Web Fonts. All you need to do is include a single line of HTML.

In your WordPress dashboard, navigate to Divi and Theme Options and select the Integration tab. Make sure the header code is enabled and paste the code.

include the icon name. Find the icon names in the material icons library by selecting any icon and opening the panel. You can also stylize the icon with additional CSS as you would with fonts.

Here is an example CSS code you can use to stylize the icon.

The second way to install Material Icons to your site is to use the wp and divi icons plugin which will add more than 2500 icons to WordPress and includes Font Awesome Icons, Material Icons, and 450 custom-designed icons. This plugin also has 48 multi-colored icons and a customizer so you can create your own library of color combinations.

One of my favorite features of this plugin is that the icons are searchable and you can see them in a live preview. WP and Divi Icons Pro is available as a standalone purchase or if you are a Divi Space Annual or Lifetime Member, it’s included! You can find a link to the WP and Divi Icons in the video description.

Thanks for joining me in this Divi Space Snippet Series, See you next time!

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<i class="material-icons">face</i>

CSS

i.material-icons {
font-size:35px;  
color: #ffffff;
padding:10px;
border-radius:50%;
box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
background-color:#3793ef;
}

Does this snippet (still) work?

Please let us know if everything worked as expected. If you think this code saved you time, we will be happy to receive a comment! :)

Subscribe to our youtube channel because there’s more to come!

License: This CSS snippet is created by Divi Space, September 2019. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

2 Comments

andres on July 16, 2021 at 11:37 am

Hi, I am using Mac and this is not working. When I paste the code it appears the word ”face” instead of the icon.
Reply
- Anna Kurowska on August 5, 2021 at 12:31 pm
  
  Hi Andres, make sure the material icons are loaded. I tested it and everything seems to be working on my end. If you can’t figure it out, send us link to your website, we will help you.
  
  Here is how it should look:
  https://tutorials.aspengrovestudio.com/embed-material-design-icons-to-divi/

Embed Material Design Icons to Divi

Watch Tutorial

HTML

CSS

Does this snippet (still) work?