.icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask-image: var(--icon-mask-image);
    mask-image: var(--icon-mask-image);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.icon-menu { --icon-mask-image: url('/images/actions/menu.svg'); }
.icon-back { --icon-mask-image: url('/images/actions/back.svg'); }
.icon-logout { --icon-mask-image: url('/images/actions/logout.svg'); }
.icon-save { --icon-mask-image: url('/images/actions/save.svg'); }
.icon-home { --icon-mask-image: url('/images/actions/home.svg'); }
.icon-close { --icon-mask-image: url('/images/actions/close.svg'); }
.icon-delete { --icon-mask-image: url('/images/actions/delete.svg'); }
.icon-edit { --icon-mask-image: url('/images/actions/edit.svg'); }
.icon-add { --icon-mask-image: url('/images/actions/add.svg'); }
.icon-login { --icon-mask-image: url('/images/actions/login.svg'); }
.icon-counter { --icon-mask-image: url('/images/pages/counter.svg'); }
.icon-weather { --icon-mask-image: url('/images/pages/weather.svg'); }
.icon-docs { --icon-mask-image: url('/images/doc.svg'); }
.icon-demos { --icon-mask-image: url('/images/demos.svg'); }