Estou tentando centralizar esse caractere de texto ☢ dentro de um círculo. (& # 9762;)

Enquanto o IE 10 exibe o texto centralizado na vertical e na horizontal, o Chrome e o Firefox renderizam muito preenchimento na parte superior.

Alguma idéia de como corrigir isso? (O Flexbox não é obrigatório)

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;
}

Veja a demonstração ao vivo aqui:http://codepen.io/dash/pen/ZYePWP