@blaze-cms/react-page-builder 0.115.0-alpha.1 → 0.116.0

package/src/components/SearchFilter/components/Checkbox.js

@@ -2,11 +2,10 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import upperFirst from 'lodash.upperfirst';
 import { Checkboxes } from '@blaze-react/checkboxes';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
 import { withTitle } from '../../../HOC';
 import { decodeValue } from '../helpers';
-import { LIMIT_MIN, LIMIT_MAX, MORE, LESS, DOWN, UP } from '../constants';
-
-const getButtonInfo = isMore => (isMore ? { icon: DOWN, text: MORE } : { icon: UP, text: LESS });
+import { LIMIT_MIN, LIMIT_MAX, MORE, LESS } from '../constants';
 
 const Checkbox = ({ data, prop, updateFilterValues, filterValues, label, shouldSearch }) => {
   const [checkboxLimit, setCheckboxLimit] = useState(null);
@@ -69,8 +68,21 @@ const Checkbox = ({ data, prop, updateFilterValues, filterValues, label, shouldS
       />
       {data[prop].buckets.length > LIMIT_MIN && (
         <div role="button" className="see-more" onClick={handleCheckboxOptions}>
-          <i className={`fas fa-chevron-${getButtonInfo(shouldDisplayMore).icon}`} />
-          {` See ${getButtonInfo(shouldDisplayMore).text}`}
+          {shouldDisplayMore ? (
+            <>
+              <i>
+                <FaChevronDown className="inline-icon" />
+              </i>
+              {` See ${MORE}`}
+            </>
+          ) : (
+            <>
+              <i>
+                <FaChevronUp className="inline-icon" />
+              </i>
+              {` See ${LESS}`}
+            </>
+          )}
         </div>
       )}
     </>

package/src/components/SearchFilter/components/TextSearch.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Input from '@blaze-react/input';
+import { MdSearch } from 'react-icons/md';
 import { withTitle } from '../../../HOC';
 import { SEARCH_TERM } from '../constants';
 
@@ -24,7 +25,9 @@ const TextSearch = ({ label, searchValue, updateFilterValues, handleSubmit, filt
           e.preventDefault();
           updateFilterValues({ [SEARCH_TERM]: searchValue }, true);
         }}>
-        <i className="material-icons">search</i>
+        <i>
+          <MdSearch />
+        </i>
       </button>
     </div>
   </div>

package/src/components/SearchFilter/constants.js

@@ -13,8 +13,6 @@ const LIMIT_MIN = 5;
 const LIMIT_MAX = 1000;
 const MORE = 'more';
 const LESS = 'less';
-const DOWN = 'down';
-const UP = 'up';
 const UPDATED_RANGES = 'updated_ranges';
 const MIN_VALUE = 'min-value';
 const MAX_VALUE = 'max-value';
@@ -52,8 +50,6 @@ export {
   LIMIT_MAX,
   MORE,
   LESS,
-  DOWN,
-  UP,
   UPDATED_RANGES,
   MIN_VALUE,
   MAX_VALUE,

package/src/components/SocialFollow/SFItem.js

@@ -4,12 +4,14 @@ import PropTypes from 'prop-types';
 import { SOCIAL_NETWORKS, BASE_CLASS_NAME_FOLLOW } from './sf.config';
 
 const SFItem = ({ url, id }) => {
-  const { name, className, icon, spanClassName } = SOCIAL_NETWORKS[id];
+  const { name, className, Icon, spanClassName } = SOCIAL_NETWORKS[id];
 
   return (
     <li className={BASE_CLASS_NAME_FOLLOW}>
       <a title={name} href={url} className={className} rel="noopener nofollow" target="_blank">
-        <i className={`fab ${icon}`} />
+        <i>
+          <Icon />
+        </i>
         <span className={`social__network ${spanClassName}`}>{name}</span>
       </a>
     </li>

package/src/components/SocialFollow/sf.config.js

@@ -1,3 +1,12 @@
+import {
+  FaFacebookF,
+  FaTwitter,
+  FaPinterestP,
+  FaInstagram,
+  FaLinkedinIn,
+  FaYoutube
+} from 'react-icons/fa';
+
 export const BASE_CLASS_NAME_FOLLOW = 'social__list-item social__list-item--follow';
 export const PORTRAIT = 'portrait';
 export const LANDSCAPE = 'landscape';
@@ -6,37 +15,37 @@ export const SOCIAL_NETWORKS = {
   facebook: {
     name: 'Facebook',
     className: 'facebook',
-    icon: 'fa-facebook-f',
+    Icon: FaFacebookF,
     spanClassName: 'hidden'
   },
   twitter: {
     name: 'Twitter',
     className: 'twitter',
-    icon: 'fa-twitter',
+    Icon: FaTwitter,
     spanClassName: 'hidden'
   },
   pinterest: {
     name: 'Pinterest',
     className: 'pinterest',
-    icon: 'fa-pinterest-p',
+    Icon: FaPinterestP,
     spanClassName: 'hidden'
   },
   instagram: {
     name: 'Instagram',
     className: 'instagram',
-    icon: 'fa-instagram',
+    Icon: FaInstagram,
     spanClassName: 'hidden'
   },
   linkedin: {
     name: 'Linkedin',
     className: 'linkedin',
-    icon: 'fa-linkedin-in',
+    Icon: FaLinkedinIn,
     spanClassName: 'hidden'
   },
   youtube: {
     name: 'YouTube',
     className: 'youtube',
-    icon: 'fa-youtube',
+    Icon: FaYoutube,
     spanClassName: 'hidden'
   }
 };

package/tests/unit/src/components/Image/GlobalLightbox/__snapshots__/GlobalLightbox.test.js.snap

@@ -19,9 +19,21 @@ exports[`GlobalLightbox component should match snapshot 1`] = `
           class="modal__close"
           role="button"
         >
-          <i
-            class="fas fa-times"
-          />
+          <i>
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 352 512"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+              />
+            </svg>
+          </i>
         </div>
       </header>
       <div

package/tests/unit/src/components/SearchFilter/SearchFilter/__snapshots__/CloseMobileForm.test.js.snap

@@ -9,10 +9,25 @@ exports[`CloseMobileForm component should render without throwing error and matc
       Search refinement
     </p>
     <i
-      class="material-icons"
       role="button"
     >
-      close
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0z"
+          fill="none"
+        />
+        <path
+          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+        />
+      </svg>
     </i>
   </div>
 </DocumentFragment>

package/tests/unit/src/components/SearchFilter/SearchFilter/__snapshots__/ResetDesktopForm.test.js.snap

@@ -11,9 +11,21 @@ exports[`ResetDesktopForm component should render without throwing error and mat
       title="reset--button"
       type="button"
     >
-      <i
-        class="fas fa-redo-alt"
-      />
+      <i>
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 512 512"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
+          />
+        </svg>
+      </i>
     </button>
     <div
       data-testid="reset-button"

package/tests/unit/src/components/SearchFilter/SearchFilter/__snapshots__/SearchFilter.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop = 0 should render without throwing error and match snapshot 1`] = `
+exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop > 0 should render without throwing error and match snapshot 1`] = `
 <DocumentFragment>
   <form
     class=""
@@ -19,9 +19,21 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
           title="reset--button"
           type="button"
         >
-          <i
-            class="fas fa-redo-alt"
-          />
+          <i>
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 512 512"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
+              />
+            </svg>
+          </i>
         </button>
         <div
           data-testid="reset-button"
@@ -33,18 +45,18 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
       <div
         class="filter__wrapper filter__wrapper--search-refine"
       >
-        <button
-          class="filter__more-filters-mobile-toggler"
-          type="button"
-        >
-          Filters
-        </button>
         <div
           class="filter__more-filters-mobile-wrapper"
         >
           <div
             class="filter__more-filters-mobile-content"
           >
+            <button
+              class="filter__more-filters-desktop-toggler"
+              type="button"
+            >
+              More filters
+            </button>
             <div
               class="filter__more-filters-desktop-wrapper"
             >
@@ -63,9 +75,21 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
                     title="reset--button"
                     type="button"
                   >
-                    <i
-                      class="fas fa-redo-alt"
-                    />
+                    <i>
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        stroke="currentColor"
+                        stroke-width="0"
+                        viewBox="0 0 512 512"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
+                        />
+                      </svg>
+                    </i>
                   </button>
                   <div
                     data-testid="reset-button"
@@ -95,9 +119,21 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
                 title="reset--button"
                 type="button"
               >
-                <i
-                  class="fas fa-redo-alt"
-                />
+                <i>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    stroke="currentColor"
+                    stroke-width="0"
+                    viewBox="0 0 512 512"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
+                    />
+                  </svg>
+                </i>
               </button>
               <div
                 data-testid="reset-button"
@@ -127,7 +163,7 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
 </DocumentFragment>
 `;
 
-exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop > 0 should render without throwing error and match snapshot 1`] = `
+exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop = 0 should render without throwing error and match snapshot 1`] = `
 <DocumentFragment>
   <form
     class=""
@@ -146,9 +182,21 @@ exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop
           title="reset--button"
           type="button"
         >
-          <i
-            class="fas fa-redo-alt"
-          />
+          <i>
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 512 512"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
+              />
+            </svg>
+          </i>
         </button>
         <div
           data-testid="reset-button"
@@ -160,18 +208,18 @@ exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop
       <div
         class="filter__wrapper filter__wrapper--search-refine"
       >
+        <button
+          class="filter__more-filters-mobile-toggler"
+          type="button"
+        >
+          Filters
+        </button>
         <div
           class="filter__more-filters-mobile-wrapper"
         >
           <div
             class="filter__more-filters-mobile-content"
           >
-            <button
-              class="filter__more-filters-desktop-toggler"
-              type="button"
-            >
-              More filters
-            </button>
             <div
               class="filter__more-filters-desktop-wrapper"
             >
@@ -190,9 +238,21 @@ exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop
                     title="reset--button"
                     type="button"
                   >
-                    <i
-                      class="fas fa-redo-alt"
-                    />
+                    <i>
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        stroke="currentColor"
+                        stroke-width="0"
+                        viewBox="0 0 512 512"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
+                        />
+                      </svg>
+                    </i>
                   </button>
                   <div
                     data-testid="reset-button"
@@ -222,9 +282,21 @@ exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop
                 title="reset--button"
                 type="button"
               >
-                <i
-                  class="fas fa-redo-alt"
-                />
+                <i>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    stroke="currentColor"
+                    stroke-width="0"
+                    viewBox="0 0 512 512"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
+                    />
+                  </svg>
+                </i>
               </button>
               <div
                 data-testid="reset-button"
@@ -273,9 +345,21 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
           title="reset--button"
           type="button"
         >
-          <i
-            class="fas fa-redo-alt"
-          />
+          <i>
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 512 512"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
+              />
+            </svg>
+          </i>
         </button>
         <div
           data-testid="reset-button"
@@ -323,9 +407,21 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
                     title="reset--button"
                     type="button"
                   >
-                    <i
-                      class="fas fa-redo-alt"
-                    />
+                    <i>
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        stroke="currentColor"
+                        stroke-width="0"
+                        viewBox="0 0 512 512"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
+                        />
+                      </svg>
+                    </i>
                   </button>
                   <div
                     data-testid="reset-button"
@@ -355,9 +451,21 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
                 title="reset--button"
                 type="button"
               >
-                <i
-                  class="fas fa-redo-alt"
-                />
+                <i>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    stroke="currentColor"
+                    stroke-width="0"
+                    viewBox="0 0 512 512"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
+                    />
+                  </svg>
+                </i>
               </button>
               <div
                 data-testid="reset-button"
@@ -406,9 +514,21 @@ exports[`SearchFilter component when the device is desktop should render without
           title="reset--button"
           type="button"
         >
-          <i
-            class="fas fa-redo-alt"
-          />
+          <i>
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 512 512"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
+              />
+            </svg>
+          </i>
         </button>
         <div
           data-testid="reset-button"
@@ -452,9 +572,21 @@ exports[`SearchFilter component when the device is mobile when isCollapsedOnResp
           title="reset--button"
           type="button"
         >
-          <i
-            class="fas fa-redo-alt"
-          />
+          <i>
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 512 512"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
+              />
+            </svg>
+          </i>
         </button>
         <div
           data-testid="reset-button"
@@ -493,10 +625,25 @@ exports[`SearchFilter component when the device is mobile when isCollapsedOnResp
         Search refinement
       </p>
       <i
-        class="material-icons"
         role="button"
       >
-        close
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0z"
+            fill="none"
+          />
+          <path
+            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+          />
+        </svg>
       </i>
     </div>
     <div

package/tests/unit/src/components/SearchFilter/components/__snapshots__/TextSearch.test.js.snap

@@ -31,10 +31,24 @@ exports[`TextSearch component should render without throwing an error and match
         class="icon-button icon-button--search"
         type="button"
       >
-        <i
-          class="material-icons"
-        >
-          search
+        <i>
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <path
+              d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+            />
+          </svg>
         </i>
       </button>
     </div>

package/tests/unit/src/components/SocialFollow/__snapshots__/SFItem.test.js.snap

@@ -12,9 +12,21 @@ exports[`SFItem component should match snapshot and render without throwing an e
       target="_blank"
       title="Facebook"
     >
-      <i
-        class="fab fa-facebook-f"
-      />
+      <i>
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 320 512"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
+          />
+        </svg>
+      </i>
       <span
         class="social__network hidden"
       >