.icon {
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    width: 24px;
    height: 24px;
    display: inline-block;
    background-color: var(--primary-color);
}

.icon.logo {
    mask-image: url('/imagens/logo.svg');
    -webkit-mask-image: url('/imagens/logo.svg');
}

.icon.home {
    mask-image: url('/icones/home.svg');
    -webkit-mask-image: url('/icones/home.svg');
}

.icon.menu {
    mask-image: url('/icones/menu.svg');
    -webkit-mask-image: url('/icones/menu.svg');
}

.icon.user {
    mask-image: url('/icones/user.svg');
    -webkit-mask-image: url('/icones/user.svg');
}

.icon.edit {
    mask-image: url('/icones/edit.svg');
    -webkit-mask-image: url('/icones/edit.svg');
}

.icon.delete {
    mask-image: url('/icones/delete.svg');
    -webkit-mask-image: url('/icones/delete.svg');
}

.icon.clock {
    mask-image: url('/icones/clock.svg');
    -webkit-mask-image: url('/icones/clock.svg');
}

.icon.add {
    mask-image: url('/icones/add-circle.svg');
    -webkit-mask-image: url('/icones/add-circle.svg');
}

.icon.turmas {
    mask-image: url('/icones/turma.svg');
    -webkit-mask-image: url('/icones/turma.svg');
}

.icon.componente {
    mask-image: url('/icones/componente.svg');
    -webkit-mask-image: url('/icones/componente.svg');
}

.icon.professor {
    mask-image: url('/icones/professor.svg');
    -webkit-mask-image: url('/icones/professor.svg');
}

.icon.relatorio {
    mask-image: url('/icones/relatorio.svg');
    -webkit-mask-image: url('/icones/relatorio.svg');
}

.icon.config {
    mask-image: url('/icones/config.svg');
    -webkit-mask-image: url('/icones/config.svg');
}

.icon.busca {
    mask-image: url('/icones/search.svg');
    -webkit-mask-image: url('/icones/search.svg');
}