NgStarter Angular icon component supports more than 150,000 different icons. Below are examples of some icon sets that can be used together without problems.
Getting Started
Forms
Components
68
Action Required
Alert
Announcement
Avatar
Badge
Block Loader
Bottom Sheet
Card
Card Overlay
Carousel
Chips
Code Highlighter
Color Picker
Color Switcher
Command Bar
Comment Editor
Comparison Slider
Confirm
Content Fade
Cookie Popup
Crop
Datepicker
Dialog
Divider
Drawer
Emoji Picker
Empty State
Expand
Expansion Panel
Filter Builder
Gauge
Grid
Guided Tour
Icon
Image Placeholder
Image Resizer
Image Viewer
Image Zoom Viewer
Incidents
Keyboard
Layout
List
Marquee
Menu
Notifications
Paginator
Panel
Popover
Progress Bar
Progress Spinner
Resizable Container
Screen Loader
Sidenav
Signature Pad
Skeleton
Slider
Snackbar
Split Pane
Stepper
Suggestions
Table
Tabs
Text Editor
Thumbnail Maker
Tiles
Timeline
Timepicker
Toolbar
Tooltip
Tree
Upload
Video Viewer
Libraries
GET NGSTARTER Icon
Symbols Icons (Default)
Symbols is the modern icon font consolidating over 3,275 glyphs with a wide range of design variants. It is a default font in the NgStarter.
Phosphor Icons
Phosphor icons – is a great icon pack that has 6 different styles per icon (thin,light,regular,bold,duotone,fill) and there are over 1300 icons in total.
Circle Flags Icons
Circle Flags is a collection of 400+ minimal circular SVG country, state and language flags.
API Reference
Properties for the ngs-icon component.
| Prop | Type | Default |
|---|---|---|
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