Iconos


El kit Digital UC usa la librería de iconos de Material Designlaunch.

Iconos primarios

Para usar los iconos, se debe incluir el texto asociado al ícono en el tag <i class="uc-icon"></i>

Existen clases modificadoras para darle tamaños específicos (tamaño por defecto es de 24x24 px):

  • .uc-svg-icon--sm para tamaño de 16x16 px.
  • .uc-svg-icon--lg para tamaño de 42x42 px.
  • .uc-svg-icon--xl para tamaño de 64x64 px.

Así como tambien una clase para deshabilitar el icono:

  • .uc-icon--disabled le cambia el color a gris

Y por ultimo una clase para que el icono se gire 180 grados :

  • .uc-icon--rotate-180 (útil para animaciones)
Ícono Básico

Ejemplo:

Cargando ...
Ícono con fondo

Ejemplo:

Cargando ...

Iconos complementarios (formato svg)

Para usar todos los iconos más actuales de la librería de Material Design que no estén incorporados en la librería de iconos primarios, se pueden incorporar como archivo en formato svg.

utilizando la clase .uc-svg-icon para que se visualicen de la forma correcta, las clases modificadoras funcionan de la misma manera que en los iconos primarios.

Iconos complementarios (formato svg)

Ejemplo:

Cargando ...