.sportsicon {
    display: inline-block;
    width: 1em;
    height: 1em;

    /* Farbe kommt über currentColor */
    background-color: currentColor;

    /* Abstand zum Text */
    margin-right: 0.35em;

    /* optische Ausrichtung zur Schrift */
    vertical-align: -0.12em;
}

.sportsicon.running {
    -webkit-mask: url("../images/icons/laufen.svg") no-repeat center / contain;
    mask: url("../images/icons/laufen.svg") no-repeat center / contain;
}
.sportsicon.darts {
    -webkit-mask: url("../images/icons/darts.svg") no-repeat center / contain;
    mask: url("../images/icons/darts.svg") no-repeat center / contain;
}
.sportsicon.soccer {
    -webkit-mask: url("../images/icons/fussball.svg") no-repeat center / contain;
    mask: url("../images/icons/fussball.svg") no-repeat center / contain;
}
.sportsicon.bike {
    -webkit-mask: url("../images/icons/radsport.svg") no-repeat center / contain;
    mask: url("../images/icons/radsport.svg") no-repeat center / contain;
}
.sportsicon.tabletennis {
    -webkit-mask: url("../images/icons/tischtennis.svg") no-repeat center / contain;
    mask: url("../images/icons/tischtennis.svg") no-repeat center / contain;
}
.sportsicon.turnen {
    -webkit-mask: url("../images/icons/turnen.svg") no-repeat center / contain;
    mask: url("../images/icons/turnen.svg") no-repeat center / contain;
}