How to center a SVG icon in a div?

I’m making a custom checkbox field, the icon is an SVG. But the problem is that I can’t center this icon inside my div. Can you tell me how to resolve this?

With the image you can see that it is well centered in width, but the problem is in height.

Here’s my code I put into codesandbox.io

enter image description here

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <label>
        <input className="input-checkbox" type="checkbox" />
        <div className="content-icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
          >
            <mask
              id="mask0_1397_43"
              maskUnits="userSpaceOnUse"
              x="0"
              y="0"
              width="24"
              height="24"
            >
              <rect width="24" height="24" fill="#D9D9D9" />
            </mask>
            <g mask="url(#mask0_1397_43)">
              <path
                d="M10.6 16.2L17.65 9.15L16.25 7.75L10.6 13.4L7.75 10.55L6.35 11.95L10.6 16.2ZM5 21C4.45 21 3.979 20.8043 3.587 20.413C3.19567 20.021 3 19.55 3 19V5C3 4.45 3.19567 3.979 3.587 3.587C3.979 3.19567 4.45 3 5 3H19C19.55 3 20.021 3.19567 20.413 3.587C20.8043 3.979 21 4.45 21 5V19C21 19.55 20.8043 20.021 20.413 20.413C20.021 20.8043 19.55 21 19 21H5Z"
                fill="#035D91"
              />
            </g>
          </svg>
        </div>
      </label>
    </div>
  );
}
.input-checkbox {
  all: unset;
  width: 32px;
  height: 32px;
}

.content-icon {
  display: block;
  text-align: -webkit-center;
  border: 1px solid red;
  width: 50px;
}

Thank you.