{"id":64904,"date":"2016-02-25T04:15:19","date_gmt":"2016-02-25T09:15:19","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=64904"},"modified":"2017-08-24T05:26:56","modified_gmt":"2017-08-24T09:26:56","slug":"magento-how-to-manage-material-design-icons","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/magento-how-to-manage-material-design-icons.html","title":{"rendered":"Magento. How to manage Material Design icons"},"content":{"rendered":"

This tutorial shows how to edit Material Design icons block in Magento<\/strong>.<\/p>\r\n

Magento. How to manage Material Design icons<\/a><\/p>\r\n

    \r\n
  1. \r\n

    Right click the mouse and use ‘Inspect element’<\/strong> tool to locate the CSS class for the icon to edit and copy the CSS class for the cart:<\/p>\r\n

    \"Magento_How_to_manage_material_design_icons_1\"<\/a>\r\n\t<\/li>\r\n

  2. \r\n

    Open the file with the css inspected rule from the server or computer using a code editor and look for the class code in it, as \/skin\/frontend\/tm_themes\/themeXXX\/css\/styles.css<\/strong> in our case:<\/p>\r\n

    \"Magento_How_to_manage_material_design_icons_2\"<\/a>\r\n\t<\/li>\r\n

  3. \r\n

    Open skin\/frontend\/tm_themes\/theme_XXX\/css\/material-design.css<\/strong> and copy the needed content code: <\/p>\r\n

    \"Magento_How_to_manage_material_design_icons_3\"<\/a><\/p>\r\n

    We strongly recommend backing up the file before editing it.<\/p>\r\n<\/li>\r\n

  4. \r\n

    Paste the content code copied from skin\/frontend\/tm_themes\/theme_XXX\/css\/material-design.css<\/strong> to your css rule content property:<\/p>\r\n

    \"Magento_How_to_manage_material_design_icons_4\"<\/a>\r\n\t<\/li>\r\n

  5. \r\n

    Save<\/strong> the changes and refresh the site:<\/p>\r\n

    \"Magento_How_to_manage_material_design_icons_5\"<\/a>\r\n\t<\/li>\r\n<\/ol>\r\n

    \r\n\r\n\r\n<\/a>\r\n<\/div>\r\n

    Feel free to check the detailed video tutorial below:<\/p>\r\n

    Magento. How to manage Material Design icons<\/a><\/p>","protected":false},"excerpt":{"rendered":"

    This tutorial shows how to edit Material Design icons block in Magento<\/strong>.<\/p>\n","protected":false},"author":75,"featured_media":64910,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[729],"tags":[955,674,2407,2040],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/64904"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=64904"}],"version-history":[{"count":2,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/64904\/revisions"}],"predecessor-version":[{"id":82928,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/64904\/revisions\/82928"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/64910"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=64904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=64904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=64904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}