div.shr-icon {
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: currentColor;
    height: 1.4em;
    width: 1.4em;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

a .shr-icon {
    color: inherit;
}

div.shr-icon-edit {
    --svg: url('../svg/edit_square.svg');
    /* Chrome, Edge */
    -webkit-mask: var(--svg);
    /* Firefox,  Safari */
    mask: var(--svg);
}

div.shr-icon-edit {
    --svg: url('../svg/edit_square.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-add {
    --svg: url('../svg/add_box.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-badge {
    --svg: url('../svg/badge.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-bookmark {
    --svg: url('../svg/bookmark.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-briefcase {
    --svg: url('../svg/briefcase.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-cancel {
    --svg: url('../svg/cancel.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-check {
    --svg: url('../svg/check_circle.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-csv {
    --svg: url('../svg/csv.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-file {
    --svg: url('../svg/description.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    margin-bottom: 4px;
}

div.shr-icon-download {
    --svg: url('../svg/download.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-error {
    --svg: url('../svg/error.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-event-list {
    --svg: url('../svg/event_list.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-event-list {
    --svg: url('../svg/event_list.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-zip {
    --svg: url('../svg/folder_zip.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-home {
    --svg: url('../svg/home.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
    margin-bottom: 5px;
}

div.shr-icon-info {
    --svg: url('../svg/info.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-link {
    --svg: url('../svg/link.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-list {
    --svg: url('../svg/list_bulleted.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-mail {
    --svg: url('../svg/mail.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-notifications {
    --svg: url('../svg/notifications.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-external-link {
    --svg: url('../svg/open_in_new.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-user {
    --svg: url('../svg/person.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-refresh {
    --svg: url('../svg/refresh.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-clock {
    --svg: url('../svg/schedule.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-search {
    --svg: url('../svg/search.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}

div.shr-icon-star {
    --svg: url('../svg/star.svg');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}