Violin.css

Input Icon: Disable 

<i class="material-icons inv-input-icon inv-input-icon--disabled">
    visibility
</i>
 
<i class="material-icons inv-input-icon {{ input-icon.modifier }}">
  {{ input-icon.icon }}
</i>
 
{
  "input-icon": {
    "icon": "visibility",
    "disabled": true,
    "modifier": "inv-input-icon--disabled"
  }
}
  • Content: 
    .inv-input-icon {
  cursor: pointer;
  color: var(--color-default--regular);
  max-width: 24px;
  max-height: 24px;
}

.inv-input-icon--active {
  color: var(--color-primary--regular);
}

.inv-input-icon--disabled {
  color: var(--color-default--light);
  cursor: not-allowed;
}
  • URL: /components/raw/input-icon/input-icon.css
  • Filesystem Path: src/components/input-icon/input-icon.css
  • Size: 279 Bytes

Input Icon

Utilizadas nos campos de input

Tendo a classe base .inv-input-icon, podendo ser adicionado um i

Default Input Icon

Icone padrão, usado em componentes para indicar qual o tipo de input, exemplo: Datepicker e Dropdown. Também para realizar ações, ex: ver senha.

<i class="material-icons inv-input-icon">visibility</i>
Modificadores Uso
.inv-input-icon--active Modifica o icon input com estilização de ativo
.inv-input-icon--disabled Modifica o icon input com estilização de desabilitado

Active Input Icon

Versão ativa.

<i class="material-icons inv-input-icon inv-input-icon--active">visibility</i>

Disabled Input Icon

Versão desabilitada, sendo feita automaticamente quando o icone estiver em conjunto com o input dentro de um campo de formulário.

Também podendo ser feita de forma manual adicionando a classe .inv-input-icon--disabled

<i class="material-icons inv-input-icon inv-input-icon--disabled">visibility</i>