.base-icon {
    width: 24px !important;
    height: 24px !important;
    
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;

    -webkit-mask: none;
    mask: none;
    
    -webkit-mask-image: none;
    mask-image: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    
    background-clip: content-box;
}

.calendar-icon {
    -webkit-mask: url("../img/calendar.png");
    mask: url("../img/calendar.png");
}

.category-icon {
    -webkit-mask: url("../img/category.png");
    mask: url("../img/category.png");
}

.comment-icon {
    -webkit-mask: url("../img/comment.png");
    mask: url("../img/comment.png");
}

.icon-index {
    background-color: #503E3C;
}