Custom Checkbox tick not consistent on Edge Browser - css

Question

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">✔</span>
<span class="btntooltip" data-val="checkboxTest">Text 1</span>
</label>

Answer 1

Try this.
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 {
padding: 0px 1px;
color: white;
margin: 6px 4px 6px 0;
font-weight: normal;
font-family: Segoe UI Symbol;
position: relative;
}
input[type='checkbox'] + .tick_mark:before {
content: '\a0';
display: inline-block;
width: 1.1em;
height: 1.1em;
border: 1px solid #222;
margin-right: 0.25em;
line-height: 1;
position: absolute;
top: 1px;
left: -2px;
}
<label>
<input name="postSelected" class="NonUnSaved" id="chkBlog" type="checkbox" value="4">
<span class="tick_mark">✔</span>
<span class="btntooltip" data-val="checkboxTest">Text 1</span>
</label>

Answer 2

I think the simplest way would be to experiment with padding. This makes a better square in Edge:
.tick_mark {
...
padding: 0px 2px;
...
}
You will have to search for how to apply different css to Edge only but i think it's still possible.
You might not be able to make them all exactly the same, but very close.