如何显示“内容”：在Firefox中？

Question

Chrome中的一切正常，但Microsoft Edge和Firefox只显示复选框边框的一小块。我尝试了背景图像属性，但它不适用于我的代码 - 图像出现在复选框之前。我尝试在div类中放置带有background-image属性的“my-icon”和“checkbox-body-checkmark”，但是复选框搞砸了，根本不起作用。

CSS：

.checkbox-body-checkmark{
    border-radius: 15px;
    border: 4px solid var(--main-color);
    height: 70px;
    width: 100%;
    box-shadow: 1px 1px 5px #000000;
}
.select-body-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.select-body-container:hover input ~ .checkbox-body-checkmark{
    background-color: #adadad;
    transition-duration: 0.6s;
}
.select-body-container input:checked ~ .checkbox-body-checkmark{
    background-color:#adadad;
    box-shadow: 1px 1px 1px #000000;
}
.body-type-font{
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.my-icon{
        content: url("Imgs/my-icon.svg");
}

HTML：

<div class="form-group col-6 col-sm-6 col-md-3 col-lg-3">
 <label class="select-body-container">
     <input type="checkbox">
          <span class="checkbox-body-checkmark my-icon"></span>
          <span class="body-type-font">My icon</span>
  </label>
</div>