Custom Checkbox tick not consistent on Edge Browser

I have tried several attempts to make the custom checkbox look consistent across all browsers. The only browser which i am facing problem is of Edge. I am using decimal code for the tickmark which appears proper in all the major browsers. But for Edge i have to change the font family as Edge browser adapts the Segoe UI Symbol Font. When changing the font the appearance of the checkbox changes and it does not look consistent.

Try running the below code without the font family: Segoe UI Symbol; That is how my original checkbox looked.

label {
  display: inline-block;
  max-width: 100%;
}

input[type='checkbox'] {
  display: none;
  box-sizing: border-box;
  padding: 0;
  outline: none;
  border: none;
  background: transparent;
  width: auto;
}

input[type='checkbox']:checked+.tick_mark {
  color: #16a0de;
}

input[type='checkbox']+span {
  cursor: pointer;
  font-weight: normal;
  font-size: 11px;
}

.tick_mark {
  border: 1px solid #666;
  padding: 0px 1px;
  color: white;
  margin: 6px 4px 6px 0;
  font-weight: normal;
  font-family: Segoe UI Symbol;
}

<label>
  <input name="postSelected" class="NonUnSaved" id="chkBlog" type="checkbox" value="4">
  <span class="tick_mark">&#10004;</span>
  <span class="btntooltip" data-val="checkboxTest">Text 1</span>
</label>