i[data-icon] {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    position: relative;
    box-sizing: content-box;

    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
        background-color: currentColor;
    }

    &[data-icon='arrow-left']::before {
        mask-image: url('img/arrow_left.svg');
    }

    &[data-icon='arrow-up']::before {
        mask-image: url('img/arrow_up.svg');
    }

    &[data-icon='arrow-right']::before {
        mask-image: url('img/arrow_right.svg');
    }

    &[data-icon='arrow-down']::before {
        mask-image: url('img/arrow_down.svg');
    }

    &[data-icon='info']::before {
        mask-image: url('img/info.svg');
    }

    &[data-icon='home']::before {
        mask-image: url('img/home.svg');
    }

    &[data-icon='menu-small']::before {
        mask-image: url('img/menu_small.svg');
    }

    &[data-icon='light']::before {
        mask-image: url('img/lightbulb.svg');
    }

    &[data-icon='warning']::before {
        mask-image: url('img/warning.svg');
    }

    &[data-icon='creature']::before {
        mask-image: url('img/creature.svg');
    }
}