How to fill this SVG?

Question

I've tried to fill this SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="23.15" height="20" viewBox="0 0 23.15 20">
    <defs>
        <style>
            .cls-1{fill:#d1d1d1}
        </style>
    </defs>
    <path id="iconfinder_heart_226577" d="M22.777 9.744a5.957 5.957 0 0 0-8.425 0l-1.4 1.4-1.4-1.4a5.958 5.958 0 0 0-8.435 8.426l1.4 1.4 8.43 8.43 8.426-8.426 1.4-1.4a5.958 5.958 0 0 0 .004-8.43zm-4.213 9.83l-5.617 5.617-5.617-5.617-2.808-2.808a3.972 3.972 0 0 1 5.617-5.617l2.808 2.809 2.809-2.809a3.972 3.972 0 0 1 5.617 5.617z" class="cls-1" transform="translate(-1.372 -7.999)"/>
</svg>

With color in the middle, but I was only able to change the color of the stroke. I've tried a lot of answers here but I didn't understand what I'm doing wrong.

<svg xmlns="http://www.w3.org/2000/svg" width="23.15" height="20" viewBox="0 0 23.15 20">
    <defs>
        <style>
            .cls-1{
              fill:#EB6320;
              stroke: none;
              type: path;
            }
        </style>
    </defs>
    <path
      id="iconfinder_heart_226577"
      d="M22.777 9.744a5.957 5.957 0 0 0-8.425 0l-1.4 1.4-1.4-1.4a5.958 5.958 0 0 0-8.435 8.426l1.4 1.4 8.43 8.43 8.426-8.426 1.4-1.4a5.958 5.958 0 0 0 .004-8.43zm-4.213 9.83l-5.617 5.617-5.617-5.617-2.808-2.808a3.972 3.972 0 0 1 5.617-5.617l2.808 2.809 2.809-2.809a3.972 3.972 0 0 1 5.617 5.617z"
      class="cls-1"
      transform="translate(-1.372 -7.999)"/>
</svg>

Answer 1

That is because there is another heart drawn on the inside. It is the last half of the path:

-4.213 9.83l-5.617 5.617-5.617-5.617-2.808-2.808a3.972 3.972 0 0 1 5.617-5.617l2.808 2.809 2.809-2.809a3.972 3.972 0 0 1 5.617 5.617z

Replace your path with just the beginning and it should work fine:

M22.777 9.744a5.957 5.957 0 0 0-8.425 0l-1.4 1.4-1.4-1.4a5.958 5.958 0 0 0-8.435 8.426l1.4 1.4 8.43 8.43 8.426-8.426 1.4-1.4a5.958 5.958 0 0 0 .004-8.43zm