Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

Icon

Icon renders SVG icons from Iconify by name, for example fluent:grid-24-regular or circle-flags:us. Use it for consistent interface icons in buttons, navigation, menus, form field prefixes and suffixes, statuses, empty states, alerts, table actions, and toolbars.

Size icons with Tailwind classes like size-4, w-5, or h-5. Color them with text color classes or CSS variables. Do not use ngs-icon as a clickable action by itself; place it inside an NgStarter button such as button[ngsIconButton]. Use Avatar for people or entities, Badge for counters and compact labels, and real images or illustrations for large visual artwork.

PropTypeDefault
name*
Name of an icon.
string

Icon name is formed as follows: first comes the name of the set, then : and then the name of the icon in the set.

All sets can be viewed here https://icon-sets.iconify.design/ clicking on the icon in the set will show the full name, copy and paste into the name property in ngs-icon.

Before using an icon from a set install it with a command such as: npm i @iconify-json/tabler.

You can find all the sets via npm: https://www.npmjs.com/search?q=@iconify-json