Icon not showing with :before in css

Ionic Framework ionic-v3
1

I’m trying to get an icon in a circle with two arrows in different direction (right and down). Here’s my css code:

.c-icon {
    width: 50px;
    height: 50px;
    color: #fff;
    background: #46a4da;
    font-size: 2.4em;
    border-radius: 50%;
    box-shadow: 0 0 0 8px #afdcf8;
    text-align: center;
    left: 20%;
    margin: 25px 0 0 25px;
    line-height: 50px;
    &:before {
        left: 84px;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        background: transparent;
        border-left-color: #afdcf8;
        border-width: 14px;
        top: 42px;
    }
    &:after {
        left: 41px;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        background: transparent;
        border-top-color: #afdcf8;
        border-width: 14px;
        top: 84px;
    }
}

The tow arrows at the wanted place, but the icon isn’t visible if I add the :before section. Without it (only with :after) it’s visible. How can I solve this problem?