.icon {
    --icon-gap: 10px;
    --icon-scale: 1;
    --icon-width: 16px;
    --icon-height: 16px;

    display: inline-block;
    width: calc(var(--icon-width) * var(--icon-scale));
    min-height: calc(var(--icon-height) * var(--icon-scale));
    white-space: nowrap;
    text-align: center;
}
    .icon.gap-right {
        margin-right: var(--icon-gap);
    }
    .icon.gap-left {
        margin-left: var(--icon-gap);
    }
    .icon::before {
        height: 100%;
        content: '';
        vertical-align: middle;
    }

    .icon img {
        width: auto;
        height: calc(var(--icon-height) * var(--icon-scale));
        vertical-align: middle;
    }
    .icon svg {
        width: var(--icon-width);
        height: var(--icon-height);
        transform: scale(var(--icon-scale));
        vertical-align: middle;
    }

.icon-add {
    --icon-width: 10px;
    --icon-height: 10px;
}
.icon-cancel {
    --icon-width: 14px;
    --icon-height: 14px;
}
.icon-checkmark {
    --icon-width: 14px;
    --icon-height: 10px;
}
.icon-edit {
    --icon-height: 14px;
}
.icon-hint {
    --icon-width: 16px;
    --icon-height: 16px;
}
.icon-info {
    --icon-width: 16px;
    --icon-height: 20px;
}
.icon-menu {
    --icon-width: 26px;
    --icon-height: 20px;
}
.icon-warning {
    --icon-width: 16px;
    --icon-height: 16px;
}
.icon-view {
    --icon-width: 14px;
    --icon-height: 10px;
}