Replacing the remainder of Font Awesome

So the Font Awesome icons for the main plugin were replaced by SVGs during one of the major updates. All of the Font Awesome icons are in a library as svgs. I was going to replace them using the methods found at the bottom of this older thread: https://wordpress.org/support/topic/request-please-use-custom-icons-font-instead-of-whole-font-awesome-library/

I figured out how to make the SVGs, but I can't get it to work.

The SVG code that I create using Inkscape looks like:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="2048" height="1792" version="1.1" viewBox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg">
 <path d="m1024 830.27q1.2872 0 2.2013 0.91405 0.914 0.91405 0.914 2.2013t-0.914 2.2013q-0.9141 0.91405-2.2013 0.91405t-2.2013-0.91405-0.9141-2.2013 0.9141-2.2013 2.2013-0.91405zm7.6153-4.5q1.1466 0 1.9579 0.81129t0.8113 1.9579v9.6922q0 1.1466-0.8113 1.9579t-1.9579 0.81129h-15.231q-1.1466 0-1.9579-0.81129t-0.8113-1.9579v-9.6922q0-1.1466 0.8113-1.9579t1.9579-0.81129h2.423l0.5517-1.4711q0.2056-0.53004 0.7518-0.91405 0.5463-0.38401 1.1196-0.38401h5.5384q0.5733 0 1.1196 0.38401 0.5462 0.38401 0.7518 0.91405l0.5516 1.4711zm-7.6153 12.461q2.0012 0 3.4236-1.4225 1.4225-1.4225 1.4225-3.4236t-1.4225-3.4236q-1.4224-1.4225-3.4236-1.4225t-3.4236 1.4225q-1.4225 1.4225-1.4225 3.4236t1.4225 3.4236q1.4224 1.4225 3.4236 1.4225z" style="stroke-width:.010817"/>
</svg>

 One of the SVGs from that thread looks like this:

.fa-clock {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");
}