.ap-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
}

.ap-icon-volume-up {
    -webkit-mask-image: url('../img/icons/volume-up.svg');
    mask-image: url('../img/icons/volume-up.svg');
}

.ap-icon-refresh {
    -webkit-mask-image: url('../img/icons/refresh.svg');
    mask-image: url('../img/icons/refresh.svg');
}

.ap-icon-sort {
    -webkit-mask-image: url('../img/icons/sort.svg');
    mask-image: url('../img/icons/sort.svg');
}

.ap-icon-delete {
    -webkit-mask-image: url('../img/icons/delete.svg');
    mask-image: url('../img/icons/delete.svg');
}

.ap-icon-spinner {
    width: 32px;
    height: 32px;
    -webkit-mask-image: url('../img/icons/spinner.svg');
    mask-image: url('../img/icons/spinner.svg');
    -webkit-animation: ap-icon-spin 1s linear infinite;
    animation: ap-icon-spin 1s linear infinite;
}

@-webkit-keyframes ap-icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes ap-icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}