Icons | Neural UI v2

Choose the integration

Structural icons such as chevrons and close affordances are supplied by Core. Normally there is nothing to configure. Application icons are a separate choice: project an SVG/component, or resolve an icon key when the component offers an icon input.

Need	Integration	Configuration
Chevron / close affordance	Core structural icon	Normally none; no icon package required.
Icon beside Button text	Project your SVG or Angular icon component.	No resolver. Position follows your template.
Button icon input / iconOnly	An application key, such as save.	A resolver plus ariaLabel for iconOnly. Button add is a minimal fallback, not a catalog.

Project your own SVG

Place a decorative SVG beside Button text. The template controls whether it comes before or after the text. No icon package or resolver is required. iconPosition configures the icon input, not projected content. Button iconOnly hides projected content, so do not use that mode for a projected icon.

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 {}

Optional Neural Icons

Choose these separate packages if you want Neural Icons definitions and its Angular renderer. Import individual definitions, such as iconSave, rather than registering a whole catalog. Core remains independent of this choice.

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

Resolve a key and render iconOnly

The first two buttons project a custom SVG or NeuralIcon directly. The third uses icon="save" with iconOnly and ariaLabel. Its app.config.ts Source supplies provideNeuIconResolver for that key. Copy both files if you choose the resolver path.

Return null for keys you do not handle. An arbitrary key does not draw an icon by itself. Another Angular renderer can implement the same contract.

Actions: 0

Accessible names and the external catalog

Hide decorative icons from assistive technology. Put the action name on Button, especially for iconOnly. Core is not an application icon catalog; Neural Icons has its own documentation and catalog.