Icons

What is already integrated

IconButton accepts an SVG string through its svg input and renders it with Angular Native’s icon component. Checkbox also uses that integration internally. Import NeuIconButtonComponent from its individual entry point; the library control already imports its internal renderer.

Keep @ng-native/icons aligned with the supported Angular Native version, along with the native SVG dependency required by the framework template. Installing a JavaScript icon set does not add a missing native module to an already-built application. Check Installation and Compatibility before changing framework peers.

Public foundation icons

The foundation entry of Neural Native groups shared primitives, tokens and utilities. Its public icon API contains the two SVG constants below.

import { NEU_PLUS_ICON, NEU_CHECK_ICON } from '@neural-ui/native/foundation';

Both constants contain SVG text with a 24 × 24 viewBox and currentColor strokes. Import them in TypeScript, assign the value to a component property and bind it to [svg]. They are data, so do not add them to the component imports array and do not register icon names or a global provider.

Some controls also use internal SVGs for chevrons, close, visibility, folders and other built-in actions. Those internal constants are not public exports of foundation; avoid imports into dist or source paths. For other drawings, supply your own SVG through the public component API described below.

A complete icon action

Create src/app/add-item.component.ts and place app-add-item inside the root theme. NEU_PLUS_ICON is one of the public SVG strings documented above. This example uses it directly; no external icon collection or name registry is needed.

import { Component, signal } from '@angular/core';
import { Text, View } from '@ng-native/components';
import { NeuIconButtonComponent } from '@neural-ui/native/icon-button';
import { NEU_PLUS_ICON } from '@neural-ui/native/foundation';

@Component({
  selector: 'app-add-item',
  imports: [Text, View, NeuIconButtonComponent],
  template: `
    <view class="actions">
      <neu-icon-button label="Add item" [svg]="addIcon" (pressed)="addItem()" />
      <text class="label">Items: {{ count() }}</text>
    </view>
  `,
  styles: `
    .actions { flex-direction: row; align-items: center; gap: 12px; padding: 24px; }
    .label { color: var(--neu-text); }
  `,
})
export class AddItemComponent {
  readonly addIcon = NEU_PLUS_ICON;
  readonly count = signal(0);

  addItem(): void {
    this.count.update(value => value + 1);
  }
}

The label provides the accessible name of an icon-only action. Use Button when the action also needs visible text.

Use an SVG from your own icon collection

Store the SVG in src/app/icons.ts and bind it through [svg]. The viewBox attribute lets the drawing scale; currentColor receives the component color. A fixed fill keeps its original color.

export const addIconSvg = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>';

An icon catalog can supply SVG data, but its web component is not a substitute for NeuIconButton or the native renderer. Check that your selected SVG uses features supported by the native SVG module and verify it on Android and iOS. Use application-controlled assets rather than untrusted SVG downloaded at runtime.