How to add Material Design Icons in Wordpress

• To install correctly this material-design-icons.zip .
• Fisrt Download the material-design-icons.zip to your computer
• Extract/Open material-design-icons.zip to Your Computer.
• Then, Find readme.txt file inside material-design-icons.zip and Open readme.txt .
• Now, Read the Requirements of this plugin. Which Wordpress Version and PHP Version are required to run this Plugin in Your Wordpress Site.
• Then, Follow the Tips Below.

Step-1 : Download " material-design-icons.zip " to Your Local Computer.

Step-2 : Then, Login to your " yourdomain.com/wp-admin " Dashboard.

Step-3 : Then, Click on " Plugins " + " Add New " from left Side Menu of Dashboard.

Step-4 : Now, Click on " Upload Plugin " button.

Step-5 : Now, Browse " material-design-icons.zip " Downloaded plugin from your computer, Where you downloaded " material-design-icons.zip " According to Step – 1 Above then, click on " Install Now "

Step-6 : Now, Click on " Active Plugin "

Step-7 : Then, See left Side Menu. " Material Design Icons " folder is added on left Side Menu. Now, Click on " Material Design Icons " folder.

Noted that: If you do not see " Material Design Icons " folder on left Side Menu then, see at left Side Menu " Settings " or " Tools ".

Step-8 : Now you configure yourself oR Watch video tutorial below about Material Design Icons Configurations and Settings or How to work " Material Design Icons " in your WordPress site.

After Activated Plugin According to Step-6 then,

1. Go to " Plugins " + " Installed Plugin " from Wordpress Admin Panel Leftside Menu.
2. or Direct go to: https://yourdomain/wp-admin/plugins.php
3. Then, Find " Material Design Icons " Activated Plugin from Plugin List.
4. Then, Click on " Settings " from Plugin that is Material Design Icons
5. Now, Edit/Add/Config the setting and Click on " Save Changes " button,

To use any of the Material Design icons on your WordPress site follow the steps below:

1. Upload material-design-icons to the /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Add the HTML markup or shortcode to your WordPress post or page.

A full list of the 1000+ Material Design icons is available: materialdesignicons.com/

To use any of the Material Design icons on your WordPress site you have two options:

HTML

Examples

Bell icon

Shortcode

Don’t want to worry about HTML tags? You can use a shortcode in your posts, pages and even widgets to display a Material Design icon.

The shortcode to use is [mdi-icon name=X] , where name=X is the class of the icon you would like to use.

Examples

Amazon icon

[mdi-icon name="amazon"]

Since v0.0.3 you can now add size and color.

[mdi-icon name="amazon" color="red" size="2x"]

Hex values will work for the color option and the include size values are: lg, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x

Author

• Brad Williams