How to add an icon before the text?

In the Drupal Commerce purchase funnel, there are images for each step of the order.

I would like to replace the images with SVGs.

Here is the CSS :

.checkout-progress--step__previous:after {    min-width: 10px;    line-height: 1;    white-space: nowrap;    text-align: center;    display: inline-block;    font-family: icons !important;    font-style: normal;    font-weight: normal !important;    vertical-align: middle;    position: absolute;    top: 25px;    left: 50%;    margin-left: 10px;    content: "ok";    color: #ffffff;    background-color: #93C54B;    border-radius: 25px;    padding: 3px;    font-size: 13px;}.checkout-progress {    margin-bottom: 30px;    padding: 0;    color: #3E3F3A;    text-align: center;}.checkout-progress--step {    position: relative;    display: inline-block;    margin: 0 .5em .5em .5em;    padding-top: 57px;    padding-right: 0;    min-width: 200px;    background-image: url("../images/note.svg?v=1234");    background-position: top center;    background-size: 42px 42px;    background-repeat: no-repeat;    font-weight: bold;    opacity: .4;}.checkout-progress--step:first-child {    background-image: url("../images/info.svg?v=1234");}.checkout-progress--step:last-child {    background-image: url("../images/gift.svg?v=1234");}.checkout-progress--step:before {    content: "Etape " counter(checkout-progress) " | ";    counter-increment: checkout-progress;}.checkout-progress--step__previous,.checkout-progress--step__current {    opacity: 1;}

And HTML :

<ol class="checkout-progress clearfix"><li class="checkout-progress--step checkout-progress--step__current">Informations sur la commande</li><li class="checkout-progress--step checkout-progress--step__next">Vérifier</li><li class="checkout-progress--step checkout-progress--step__next">Terminé</li></ol>

Here is the result :

https://ibb.co/HthgZDL

I would like to replace the images with the SVGs below :

STEP 1 : https://icons.getbootstrap.com/icons/info-circle/

STEP 2 : https://icons.getbootstrap.com/icons/file-text/

STEP 3 : https://icons.getbootstrap.com/icons/bag/

I tried the following code in the CSS file but it doesn't work :

.checkout-progress--step:first-child {  background-image: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>");}