This members-only tutorial provides the steps to add SVG icons before the buttons' filter text when using Buttons-type of facet with WP Grid Builder.
Step 1
Create your Buttons type of facet.
In my test site I set the facet to filter by restaurant_type, a custom taxonomy.
Step 2
Edit your SVG icons in a text/code editor like Sublime Text and set the fill color to #ffffff.
This is because we are going to be setting the .svg files as background images using CSS. For us to able to control the color of the stroke for regular and pressed states via filter property, a light color or white makes it easier/possible.
Sample SVG file code:
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="pie" class="svg-inline--fa fa-pie fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="#ffffff" d="M544 240c-6.44 0-10.37-1.2-14.47-3.52C494.93 136.17 400.07 64 288 64S81 136.21 46.45 236.55c-4.07 2.28-8 3.45-14.45 3.45a32 32 0 0 0 0 64c32 0 50-13.47 61.92-22.39 9.08-6.8 12.83-9.61 23.53-9.61s14.47 2.81 23.55 9.61c11.91 8.92 29.89 22.39 61.91 22.39s50-13.48 61.88-22.41c9-6.78 12.8-9.59 23.45-9.59s14.39 2.81 23.44 9.59c11.89 8.92 29.86 22.41 61.86 22.41s49.95-13.48 61.84-22.41c9.05-6.78 12.8-9.59 23.44-9.59s14.34 2.81 23.38 9.58C494.06 290.52 512 304 544 304a32 32 0 0 0 0-64zm-337.69-88.84l-16 32A16 16 0 0 1 176 192a16 16 0 0 1-14.32-23.16l16-32a16 16 0 1 1 28.63 14.32zM304 176a16 16 0 0 1-32 0v-32a16 16 0 0 1 32 0zm103.16 14.31a16 16 0 0 1-21.47-7.15l-16-32a16 16 0 1 1 28.63-14.31l16 32a16 16 0 0 1-7.16 21.46zM445.4 400H130.6l-28.36-85.08a122.1 122.1 0 0 1-44.49 18.32l31 92.88A32 32 0 0 0 119.07 448h337.87a32 32 0 0 0 30.36-21.88l31-92.88a121.62 121.62 0 0 1-44.47-18.38z"></path></svg>Step 3
Upload the SVG files to your media library.
You may need to use a plugin like Safe SVG for this.
In my test site, I used Happy Files Pro which has "Allow SVG Files" as one of its features.
Step 4
Edit the Page/Template where you will have your grid and facet with Oxygen.
In this example, it is the "Restaurants" Template which applies to the restaurant CPT archive.
Add an Easy Posts (used in my test site) or Repeater for the grid and configure it as needed.
With the Oxygen addon for WP Grid Builder active, add a Facet component and position it above the Easy Posts.
Select your facet and the Easy Posts component for the element to filter.
Step 5
At Manage > Stylesheets, create a new Stylesheet, add this sample CSS and customize as needed: