How to Host MyListing Material Icons Locally for Better Performance

Building better MyListing websites. One guide at a time.

Table of Contents

Overview

Our How to Host MyListing Material Icons Locally for Better Performance guide shows how to easily host these icons locally to speed up your website.

If you’ve ever run your website through GTMetrix and noticed the Waterfall tab showing long load times for the Material Icons, then this guide is for you.

Out of the box, MyListing makes external calls (i.e. HTTP Requests) to pull down the Material Icons from the web, which further attributes to a slower website.

What to Look For

If you run your website through a website performance tool like GTMetrix, do you notice something similar to the screenshot below when looking at the Waterfall tab?

If so, or if you just want to load the icons from your local server to reduce another external call (i.e. HTTP Request), let’s continue on and get it under control.

Implementation

Implementation

  1. Browse to Google’s Material Icons page.
  2. Looking at the line that starts with ‘src: url(https://…’, copy the full URL. (e.g. https://fonts.gstatic.com/s/materialicons/v67/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2).
  3. Paste the full URL into your browser. (Note: This will automatically download the font file you need.).
  4. Rename the downloaded file to ‘mlmaterialfont.woff2‘.
  5. Using an FTP application like ‘FileZilla’ or a plugin like ‘File Manager’, create a folder at the ROOT of your WordPress install (i.e. root of the public folder) named ‘fonts’.
  6. Copy the renamed file to the new ‘fonts’ folder.
  7. Add the MyListing Material Icons CSS Package to your website.
  8. Follow our Prevent MyListing From Loading Material Icons guide.

Verify Success

  1. Run another GTmetrix test and compare it to the previous test you ran, looking to see if Material Icon entry has dropped out of the Waterfall tab and HTTP Requests have been reduced.
  2. If everything looks good with your tests, clear the cache on any page where Material Icons are used, such as a page with the MyListing Listing Feed widget where the arrow icons are Material Icons.
  3. Ensure the Material Icons are displaying properly.

WooCommerce Subscriptions Ready

The latest version of the WooCommerce Subscriptions plugin is included (unlicensed) and once you have a Starter Site in hand, you can easily put in your own pricing, package features, graphics, etc.

Should you not wish to use WooCommerce Subscriptions, you can simply turn the Listing Subscription packages into standard MyListing packages in just a few clicks and be on your way.

  • Custom WooCommerce Endpoint Design
  • WooCoommerce Subscriptions Setup
  • Listing Subscription Packages
  • Listing Subscription Switching
  • Stripe Payment Gateway Plugin
  •  and more…

Note: The latest version of the WooCommerce Subscriptions plugin is included, but you need to purchase your own license or sign up for a qualifying MyListing Website Care plan if you wish to receive future plugin updates and support.

Premium Assets

Get licensed, premium plugins, valued at over $600 in the first year alone, making a Starter Site investment a no-brainer.

You will get licensed copies of all the plugins listed below, with the exception of the WooCommerce Subscriptions and WooCommerce Product Vendors, and the licenses are yours to keep, for as long as the plugins remain on your website.

  • Admin 2020 ($39)
  • Crocoblock Suite ($130)
  • Elementor Pro ($49)
  • Perfmatters ($25)
  • Permalink Manager Pro ($45)
  • SEOPress Pro ($39)
  • WooCommerce Product Vendors ($79) 
  • WooCommerce Subscriptions ($199)
  • WP Rocket ($49)