Iconos | Neural UI v2

Elige la integración

Core proporciona iconos estructurales como chevrons e indicadores de cierre. Normalmente no tienes que configurar nada. Los iconos de aplicación son otra decisión: proyecta un SVG/componente o resuelve una clave cuando exista el input icon.

Necesidad	Integración	Configuración
Chevron / indicador de cierre	Icono estructural de Core	Normalmente ninguna; no requiere paquete de iconos.
Icono junto al texto de Button	Proyecta tu SVG o componente Angular de iconos.	Sin resolver. La posición la decide tu template.
Button icon input / iconOnly	Una clave de aplicación, como save.	Resolver y ariaLabel para iconOnly. add es un fallback mínimo de Button, no un catálogo.

Proyecta tu SVG

Coloca un SVG decorativo junto al texto de Button. El template decide si aparece antes o después. No requiere paquete ni resolver. iconPosition configura el input icon, no el contenido proyectado. iconOnly de Button oculta contenido proyectado: no lo utilices para ese caso.

import { Component } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/core/button';

@Component({
  selector: 'app-save-action',
  imports: [NeuButtonComponent],
  template: `
    <button
      neu-button
      type="button"
    >
      <svg
        width="18"
        height="18"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        aria-hidden="true"
      >
        <path d="M5 12l4 4L19 6" />
      </svg>
      Save changes
    </button>
  `,
})
export class SaveAction {}

Neural Icons opcional

Elige estos paquetes independientes si quieres las definiciones de Neural Icons y su renderer Angular. Importa definiciones individuales, como iconSave, en lugar de registrar un catálogo entero. Core sigue siendo independiente de esa elección.

npm install @neural-icons/angular @neural-icons/core

Resuelve una clave y renderiza iconOnly

Los dos primeros botones proyectan un SVG propio o NeuralIcon directamente. El tercero utiliza icon="save" con iconOnly y ariaLabel. Su Código app.config.ts proporciona provideNeuIconResolver para esa clave. Copia ambos archivos si eliges la vía resolver.

Devuelve null para claves que no gestiones. Una clave arbitraria no dibuja un icono por sí sola. Otro renderer Angular puede implementar el mismo contrato.

Acciones: 0

Nombres accesibles y catálogo externo

Oculta los iconos decorativos a las tecnologías de apoyo. Da nombre a la acción en Button, especialmente con iconOnly. Core no es un catálogo de iconos de aplicación: Neural Icons tiene su documentación y catálogo propios.