i[class^='ei-'], i[class*=' ei-'] {
    mask: var(--image) no-repeat 50% 50%;
    mask-size: cover;
    background: currentColor;
    color: inherit;
    height: 1rem;
    width: 1rem;
    display: inline-block;
    margin: 0;
}

i.ei-sm {
    height: 0.75rem;
    width: 0.75rem;
}

i.ei-md {
    height: 0.875rem;
    width: 0.875rem;
}

i.ei-lg{
    height: 1.5rem;
    width: 1.5rem;
}

i.ei-xl{
    height: 1.75rem;
    width: 1.75rem;
}

i.ei-2x {
    height: 2rem;
    width: 2rem;
}

i.ei-3x {
    height: 2.25rem;
    width: 2.25rem;
}

i.ei-4x {
    height: 2.5rem;
    width: 2.5rem;
}

i.ei-x {
    --image: url("../images/icons/x.svg");
}

i.ei-layers {
    --image: url("../images/icons/layers.svg");
}

i.ei-filters {
    --image: url("../images/icons/filters.svg");
}

i.ei-tools {
    --image: url("../images/icons/tools.svg");
}

i.ei-printer {
    --image: url("../images/icons/printer.svg");
}

i.ei-report {
    --image: url("../images/icons/report.svg");
}

i.ei-manage {
    --image: url("../images/icons/checklist.svg");
}

i.ei-cog {
    --image: url("../images/icons/cog.svg");
}

i.ei-close {
    --image: url("../images/icons/x.svg");
}

i.ei-close2 {
    --image: url("../images/icons/x2.svg");
}

i.ei-quick-tools {
    --image: url("../images/icons/pencil-ruler.svg");
}

i.ei-emap-search {
    --image: var(--eMapSearchIcon);
}

i.ei-google-active{
    background: url("../images/icons/Google_active.svg");
}

i.ei-pole {
    --image: url("../images/icons/poleRound.png");
}

i.ei-poleRoundBack {
    --image: url("../images/icons/poleRoundBack.png");
    color: white;
}

i.ei-pedLong {
    --image: url("../images/icons/pedLong.png");
}

i.ei-handHoleBack {
    --image: url("../images/icons/handHoleBack.png");
}

i.ei-handHoleLetters {
    --image: url("../images/icons/handHoleLetters.png");
    color: white;
}

i.ei-manHoleBack {
    --image: url("../images/icons/manHoleBack.png");
}

i.ei-manHoleLetters {
    --image: url("../images/icons/manHoleLetters.png");
    color: white;
}

i.ei-pedPost {
    --image: url("../images/icons/ped_post.png");
}

i.ei-aerialSpliceCircle {
    --image: url("../images/icons/AerialSpliceCircle.png");
}

i.ei-aerialSplice {
    --image: url("../images/icons/AerialSplice.png");
    color: white;
}

i.ei-buriedSpliceSml {
    --image: url("../images/icons/BuriedSpliceSml.png");
}

i.ei-house {
    --image: url("../images/icons/house.png");
    color: white;
}

i.ei-houseCircle {
    --image: url("../images/icons/houseCircle.png");
}

i.ei-xpoint {
    --image: url("../images/icons/xpoint.png");
}

i.ei-text {
    --image: url("../images/icons/text-solid.svg")
}

i.ei-wireCenter {
    --image: url("../images/icons/poleRound.png");
}

i.ei-graph {
    --image: url("../images/icons/graph.svg");
}

i.ei-plus {
    --image: url("../images/icons/plus.svg");
}

button.ei-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    padding: 0.25rem;
    font: inherit;
    cursor: pointer;
    color: inherit;
    transition: all 0.3s ease;
    line-height: 0;
}

    button.ei-btn:hover {
        border-color: currentColor;
        filter: hue-rotate(80deg);
    }