Iconos de materiales

    Los íconos de material que vienen con el sistema de Indigo.Design contienen 160+ íconos importados de los recursos de material y 360+ íconos creados por el equipo del sistema de Indigo.Design de acuerdo con las pautas de íconos del sistema de materiales. Los iconos se utilizan para simbolizar acciones comunes en botones de iconos, elementos de lista, tarjetas, etc., para reducir la cantidad de texto que normalmente se utiliza en una etiqueta, por ejemplo. Todos los iconos también son compatibles con Ignite UI for Angular.

    • En Figma, puedes acceder a todos los íconos en una página dedicada denominada Icons. La apariencia de los íconos se puede personalizar utilizando Color styles predefinidos, lo que te permite ajustar sus colores para que se adapten a tus necesidades de diseño.
    • En Sketch, estos gráficos se encuentran en una página separada con un nombre 🎨 Material Icons, y sus colores se definen a través de el Layer styles, lo que le permite personalizar la apariencia de un icono en los diseños que está creando.
    • En Adobe XD, se colocan en una mesa de trabajo con el mismo nombre en la parte inferior de la columna izquierda del archivo de la biblioteca, y la personalización se puede lograr con los Colors del panel Bibliotecas a la izquierda.
    Note

    También hay un componente Icon dedicado con cuatro tamaños: ExtraLarge, Large, Medium y Small. Úselo al crear diseños complejos para artículos, tarjetas personalizadas y elementos de lista, etc., asignando uno de los glifos disponibles en Icons e 🎨 Material Icons en lugar de insertarlo directamente en su mesa de trabajo.

    Available Material Icons

    Hay un conjunto de más de 160 íconos de materiales ya disponibles en el sistema Indigo.Design, que se agrupan de la siguiente manera según la categorización de diseño de materiales:

    • Acción
    • Alerta
    • AV
    • Comunicación
    • Contenido
    • Dispositivo
    • Editor
    • Archivo
    • Hardware
    • Imágenes
    • mapas
    • Navegación
    • Notificación
    • Lugares
    • Social
    • Palanca
    • BM

    También hay un conjunto de más de 360 íconos de materiales adicionales que nuestro equipo ha creado como una extensión del conjunto de materiales original para las siguientes categorías:

    • Construcción
    • Contenido
    • Editor
    • Elecciones
    • Finanzas
    • Salud
    • Logotipos
    • Programación
    • Medios de comunicación social

    Estos íconos también están disponibles en GitHub para usarlos en sus proyectos.

    Adding Icons

    Con la colección preestablecida de íconos, puede diseñar hermosas aplicaciones y elegir las representaciones simbólicas correctas para sus componentes y patrones. Es posible añadir más conjuntos de iconos, pero también lo es ampliar el actual con más iconos de materiales. Dado que Ignite UI for Angular es compatible con cualquier icono de material que exista, esto podría ser exactamente lo que está buscando. Navegue su navegador hasta la herramienta Iconos de Material Design. Busque el icono que necesita, por ejemplo copyright, descárguelo como SVG y anote la categoría a la que pertenece. En este caso, lo sería Action.

    In Figma

    1. Abre la biblioteca en Figma, ve a la página Icons y mira si esa misma categoría existe como marco en el panel de capas, en la barra lateral izquierda. Si no existe, créala y sigue los pasos a continuación. Si existe, que es nuestro caso para el ícono copyright de la categoría Action, simplemente busca el ícono más a la derecha de esa categoría y deberías ver algo como esto. Ten en cuenta que los íconos están ordenados alfabéticamente en cada categoría.

    2. Ahora, duplique el Componente para este ícono de la derecha y muévalo un poco hacia la derecha. Su nombre debería ser el mismo que el duplicado y su estructura de capas debería verse así:

      Capa Usar
      Nombre icónico Define el nombre del icono como componente.
      Color Forma de icono anidado dentro del componente que es la visualización gráfica del icono
      Capa de texto Muestra el nombre del icono como una capa de texto adicional en el marco.

    3. A continuación, queremos reemplazar la forma del icono existente con el SVG que hemos descargado, por lo que debemos seleccionar la capa Nombre del icono y arrastrar y soltar el SVG con el icono copyright en el espacio de trabajo. Esto colocará el SVG sobre el componente del icono y le ayudará a encontrarlo más fácilmente. Después de soltar el SVG, esto creará un nuevo marco, copyright_black_24dp, en nuestro panel de capas, que debemos expandir y arrastrar la forma del ícono deseado justo fuera de cualquier otro grupo, pero aún en su marco actual. Después de eso, elimine cualquier otro grupo adicional; deje solo la forma del icono en el marco.

    4. Luego, tenemos que seleccionar el marco copyright_black_24dp con la forma Vector dentro y crear un componente a partir del marco. Hay dos opciones rápidas para hacer eso: hacer clic derecho en el marco y seleccionar la opción Create component o hacer clic en el ícono Create component en la barra de herramientas Figma, ubicado en el centro sobre el espacio de trabajo. A continuación, cambie el nombre de la forma vectorial a Color y configure su color en grays.700 desde los Selection colors en la barra lateral derecha.

    5. Después de actualizar el nombre del componente Icon en consecuencia, debe intercambiarlo con el componente duplicado.

    6. Por último, deberá publicar el cambio como una actualización de su biblioteca. Para ver estos cambios en los archivos suscritos, debe revisar y aceptar los cambios.

    In Sketch

    1. Abra la biblioteca en Sketch, navegue a la 🎨 Material Icons página y busque si esa misma categoría existe como una capa de texto a la izquierda. Si no es así, créelo y siga los pasos que se indican a continuación. Si es así, que es nuestro caso para el copyright icono de la Action categoría, sólo tienes que encontrar el icono más a la derecha de esa categoría, y deberías estar viendo algo como esto.

    2. Ahora, duplique el símbolo de este ícono que se encuentra más a la derecha y muévalo un poco hacia la derecha. Su nombre debería terminar con...Copy y su estructura de capas debería verse así:

      Capa Usar
      Color Define la forma y el color del icono.
      Forma Siempre un rectángulo que define el cuadro delimitador del icono

    3. A continuación, queremos reemplazar la forma del ícono existente con el SVG que hemos descargado, por lo que debemos seleccionar la capa Color y arrastrar y soltar el SVG con el ícono copyright encima. Esto creará un nuevo grupo copyright-24px en nuestro panel de capas, que debemos expandir y arrastrar la forma del icono deseada justo fuera de este grupo, pero encima de la capa Forma rectangular.

    4. Eliminemos el antiguo glifo del ícono ahora y el grupo sobrante después de quitarle la nueva forma del ícono. Luego, tenemos que seleccionar la única forma de ícono que nos queda con el símbolo copyright, cambiar su nombre a Color y establecer su Apariencia en grays.700. Estilo de solo relleno 700.

    5. Después de actualizar el nombre del símbolo en consecuencia, estamos listos para usar este ícono como cualquier otro.

    In Adobe XD

    1. Abra la biblioteca en Adobe XD, navegue hasta la mesa de trabajo 🎨 Material Icons y observe si esa misma categoría existe como una capa de texto a la izquierda. Si no es así, créelo y siga los pasos a continuación. Si es así, que es nuestro caso para el ícono copyright de la categoría Action, simplemente busque el ícono más a la derecha de esa categoría y debería ver algo como esto.

    2. Ahora, duplique el símbolo de este ícono que se encuentra más a la derecha y muévalo un poco hacia la derecha. Esto creará una instancia del símbolo indicado por la forma de diamante blanco con un contorno verde en la esquina superior izquierda cuando se selecciona la instancia.

    3. Desagrupe esta instancia y cree un nuevo grupo a partir de las dos nuevas capas, nombrándolo "_Overrides/Material Icons/action/copyright".

      Capa Usar
      Grupo ~ Define la forma y el color del icono.
      Forma Siempre un cuadrado que define el cuadro delimitador del icono

    4. A continuación, queremos reemplazar la forma del ícono existente con el SVG que hemos descargado, por lo que debemos seleccionar el Grupo con el glifo antiguo y arrastrar y soltar el SVG con el ícono copyright encima, alineando los dos en todos los lados. Esto creará un nuevo grupo, copyright-24px en nuestro panel de capas, que debemos expandir y arrastrar la forma del icono deseada justo fuera de este grupo, pero encima de la capa Forma rectangular.

    5. Eliminemos el antiguo glifo del ícono ahora y el grupo sobrante después de quitarle la nueva forma del ícono. Luego, tenemos que seleccionar la única forma de icono que nos queda con el símbolo copyright y establecer su apariencia en grays.700 desde Colores en el panel Bibliotecas.

    6. El último paso es crear un componente del grupo _Overrides/Material Icons/action/copyright para poder empezar a utilizarlo como cualquier otro elemento icono en nuestro diseño.

    Additional Resources

    Tema relacionado:

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.