Material Theme Iconic Font Replacement

Due to some recent changes in the Material Design Iconic Font kit along with some recent updates on Google Chrome browser, the Material Theme iconic font is not properly rendered in Google Chrome and may result in rendering as blank boxes.

In order to fix this issue you need to follow these steps and replace the Material Design Iconic Font kit with FontAwesome kit.

Step 1

Navigate through your FTP program of choice to design/themes/material/media/fonts and delete the Material Design Iconic Font files. These are the Material-Design-Iconic-Font.eot, Material-Design-Iconic-Font.svg, Material-Design-Iconic-Font.ttf, and Material-Design-Iconic-Font.woff.

Step 2

Navigate to design/themes/material/templates/addons/my_changes/hooks/index and create the meta.post.tpl file with the following content:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Step 3

Navigate to your theme css file in design/themes/material/css/addons/my_changes/styles.css and make the following changes:

Find and delete:

@font-face {
  font-family: 'Material-Design-Iconic-Font' !important;
  src: url('../media/fonts/Material-Design-Iconic-Font.svg') format('svg');
  src: url('../media/fonts/Material-Design-Iconic-Font.eot');
  src: url('../media/fonts/Material-Design-Iconic-Font.eot') format('embedded-opentype');
  src: url('../media/fonts/Material-Design-Iconic-Font.woff') format('woff');
  src: url('../media/fonts/Material-Design-Iconic-Font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Find and replace:

.expander {
    border-radius: 100%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
    color: #fff;
    display: block !important;
    float: right;
    margin-right: 30px;
    margin-top: -25px;
    padding: 12px;
    text-align: center;
    margin-bottom:-26px;
    position:relative;
    z-index:100;
}

with this:

.expander {
    border-radius: 100%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
    color: #fff;
    display: block !important;
    float: right;
    margin-right: 30px;
    margin-top: -25px;
    padding: 11px 15px;
    text-align: center;
    margin-bottom:-26px;
    position:relative;
    z-index:100;
}

Find and replace:

.md-local-shipping:before, .md-thumb-up:before, .md-sync:before {
    border: 4px solid rgba(255, 255, 255, 0.5);
    border-radius: 100%;
    color: #fff;
    font-size: 30px;
    font-style: normal;
    padding: 10px;
    transition:all 0.2s ease-in-out;
}

with this:

.md-local-shipping:before, .md-thumb-up:before, .md-sync:before {
    border: 4px solid rgba(255, 255, 255, 0.5);
    border-radius: 100%;
    color: #fff;
    font-size: 30px;
    font-style: normal;
    padding: 10px 12px;
    transition:all 0.2s ease-in-out;
}

Find and replace:

.ty-benefits-guarantees__item:hover .md-local-shipping:before, .ty-benefits-guarantees__item:hover .md-thumb-up:before, .ty-benefits-guarantees__item:hover .md-sync:before{
    font-size:50px;
    border: 4px solid rgba(255, 255, 255, 1);
}

with this:

.ty-benefits-guarantees__item:hover .md-thumb-up:before, .ty-benefits-guarantees__item:hover .md-sync:before{
    font-size:50px;
    border: 4px solid rgba(255, 255, 255, 1);
    padding:10px 15px;
}
.ty-benefits-guarantees__item:hover .md-local-shipping:before{
    font-size:50px;
    border: 4px solid rgba(255, 255, 255, 1);
    padding:10px 10px;
}

Find and replace:

.ty-column6:hover .plus-icon {
    opacity:1;    
    top:30px;
}

with this:

.ty-column6:hover .plus-icon {
    opacity: 1;
    padding: 7px 9px;
    top: 30px;
}

Find and replace:

.owl-theme .owl-controls .owl-buttons div {
    border-radius: 100% !important;
    padding: 3px 5px !important;    
    border: 1px solid #aaa;
    color:#000 !important;
}

with this:

.owl-theme .owl-controls .owl-buttons div {
    border: 1px solid #aaaaaa;
    border-radius: 100% !important;
    color: #000000 !important;
    padding: 3px 10px !important;
}

Find and replace:

.custom_grid .ty-btn__add-to-cart:before {
    content: "\f073" !important;    
    font-size:20px;
    font-style:normal;    
}

with this:

.custom_grid .ty-btn__add-to-cart:before {
    content: "\f07a" !important;    
    font-size:20px;
    font-style:normal;    
}

Find and replace:

.md-chevron-left:before {
  content: "\f29b";
  font-size: 20px;
  font-style: normal;
}

with this:

.md-chevron-left:before {
  content: "\f104";
  font-size: 20px;
  font-style: normal;
}

Find and replace:

.md-chevron-right:before {
  content: "\f29c";
  font-size: 20px;
  font-style: normal;
}

with this:

.md-chevron-right:before {
  content: "\f105";
  font-size: 20px;
    font-style: normal;
}

Find and replace:

.md-settings:before {
  content: "\f060";
  font-size: 20px;
  font-style: normal;
  line-height:30px;
}

with this:

.md-settings:before {
  content: "\f013";
  font-size: 20px;
  font-style: normal;
  line-height:30px;
}

Find and replace:

.ty-icon-right-circle:before {
  content: "\f29c" !important;
}

with this:

.ty-icon-right-circle:before {
  content: "\f105" !important;
}

Find and replace:

.ty-icon-left-circle:before {
  content: "\f29b" !important;
}

with this:

.ty-icon-left-circle:before {
  content: "\f104" !important;
}

Find and replace:

.md-visibility:before {
  content: "\f09a";
  font-size: 20px;
  font-style: normal;
}

with this:

.md-visibility:before {
  content: "\f06e";
  font-size: 20px;
  font-style: normal;
}

Find and replace:

.md-call:before {
  content: "\f0d5";
  font-size: 20px;
  font-style: normal;
}

with this:

.md-call:before {
  content: "\f095";
  font-size: 20px;
  font-style: normal;
}

Find and replace:

.md-local-shipping:before {
  content: "\f284";
}

with this:

.md-local-shipping:before {
  content: "\f0d1";
}

Find and replace:

.md-sync:before {
  content: "\f2c0";
}

with this:

.md-sync:before {
  content: "\f021";
}

Find and replace:

.md-thumb-up:before {
  content: "\f084";
}

with this:

.md-thumb-up:before {
  content: "\f087";
}

Find and replace:

.ty-icon-basket:before {
    content: "\f073" !important;    
    font-size:20px;
    font-style:normal;    
}

with this:

.ty-icon-basket:before {
    content: "\f07a" !important;    
    font-size:20px;
    font-style:normal;        
}

Find and replace:

.expander:before {
    content: "\f0fb" !important;
    font-size:26px;
    font-style:normal;
}

with this:

.expander:before {
    content: "\f067" !important;
    font-size:26px;
    font-style:normal;
}

Find and replace:

.plus-icon:before {
    content: "\f0fb" !important;
    font-size:20px;
    font-style:normal;
}

with this:

.plus-icon:before {
    content: "\f067" !important;
    font-size:20px;
    font-style:normal;
}

Find and replace:

.searchicon:before {
    content: "\f05f" !important;    
    font-size:20px;
    font-style:normal;    
}

with this:

.searchicon:before {
    content: "\f002" !important;    
    font-size:20px;
    font-style:normal;    
}

Find and replace:

.ty-icon-user:before {
    content: "\f006" !important;
    font-size:20px;
    font-style:normal;
}

with this:

 .ty-icon-user:before {
    content: "\f007" !important;
    font-size:20px;
    font-style:normal;
}

Find and replace:

.ty-icon-basket, .ty-icon-user, .searchicon, .custom_grid .ty-btn__add-to-cart, .expander, .plus-icon, .md-local-shipping, .md-thumb-up:before, .md-sync:before, .md-visibility:before, .ty-icon-left-circle:before, .ty-icon-right-circle:before, .md-call:before, .newstext li:before, .md-settings:before, .md-chevron-left:before, .md-chevron-right:before  {
    font-family: 'Material-Design-Iconic-Font' !important;
}

with this:

.ty-icon-basket, .ty-icon-user, .searchicon, .custom_grid .ty-btn__add-to-cart, .expander, .plus-icon, .md-local-shipping, .md-thumb-up:before, .md-sync:before, .md-visibility:before, .ty-icon-left-circle:before, .ty-icon-right-circle:before, .md-call:before, .newstext li:before, .md-settings:before, .md-chevron-left:before, .md-chevron-right:before  {
    font-family: 'FontAwesome' !important;
}