.bi {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

.bi::before {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: var(--bi-icon) no-repeat center / contain;
    mask: var(--bi-icon) no-repeat center / contain;
}

.bi-speedometer2 {
    --bi-icon: url("icons/speedometer2.svg");
}

.bi-building {
    --bi-icon: url("icons/building.svg");
}

.bi-database {
    --bi-icon: url("icons/database.svg");
}

.bi-file-earmark-text {
    --bi-icon: url("icons/file-earmark-text.svg");
}

.bi-box-seam {
    --bi-icon: url("icons/box-seam.svg");
}

.bi-calculator {
    --bi-icon: url("icons/calculator.svg");
}

.bi-bar-chart-line {
    --bi-icon: url("icons/bar-chart-line.svg");
}

.bi-sliders {
    --bi-icon: url("icons/sliders.svg");
}

.bi-box-arrow-right {
    --bi-icon: url("icons/box-arrow-right.svg");
}