Ich versuche, dieses Textzeichen ☢ innerhalb eines Kreises zu zentrieren. (& # 9762;)

Während IE 10 den Text vertikal und horizontal zentriert anzeigt, rendern sowohl Chrome als auch Firefox oben zu viel Abstand.

Irgendwelche Ideen, wie man das behebt? (Flexbox ist kein Muss)

HTML

<div class="tl-icon">
<div>☢</div>
</div>

CSS

.tl-icon {
    align-items: center;
    background: black;
    border-radius: 50%;
    color: yellow;
    display: flex;
    font-size: 3em;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

Siehe Live-Demo hier:http: //codepen.io/dash/pen/ZYePW