Introduction
@nginf/iconic ( iconic for short) is an Angular library that allows you to use open-source icons in your project. It has one major advantage over other Angular icon libraries—you can use icons as regular components.
Overview
Most icon libraries follow one of these approaches:
- A generic icon component is provided, and you pass the icon name as a string.
- SVG files are placed in the public folder and registered by name using a registration service.
- A generic icon component is used, but instead of passing the name, you provide an SVG reference.
In our opinion, the best way to use icons in your project is to treat them as regular components, just like any other component. This approach has several advantages:
- Ease of use – Icons are used like standard Angular components.
- Full IntelliSense support – You get auto-completion and type safety in your IDE.
- No additional AJAX requests – Icons are loaded immediately, improving performance.
- Everything in one place – The SVG and component logic are not separated, keeping the project structured.
- Effective tree-shaking – Unused icons are removed during the build process, reducing bundle size.
Iconic provides this functionality by compiling popular open-source icon libraries into small, optimized, and fully functional Angular components. This means you only import the icons you need.
Keep in mind that Iconic does not provide its own crafted icons; instead, it utilizes open-source free icons.
Installation
Min Angular version is v17
There is no single global installation command like npm install iconic. Instead, each icon library has its own installation package, allowing you to install only the icon library you need.
For example, to install the Lucide icon library, run:
npm install @nginf/iconic-luAnd you are good to go!
(See the documentation for each icon library for more details.)
Usage
The usage pattern is the same across all icon libraries. First, you need to import the appropriate icon and then use it inside your template.
For example, to use the ChevronDown icon from Lucide, your code would look like this:
import { ChevronDownIcon } from '@nginf/iconic-lu';
@Component({
imports:[ChevronDownIcon],
template:' <chevron-down-icon> </chevron-down-icon> '
})
export class SomeComponent{}
- Icon class names always have the
Iconsuffix. - Icon selectors always have the
iconsuffix. - Rarely, Some icon names start with a number, which is not a valid class name or selector. In such cases, a library-specific prefix is added. For example, in Font Awesome, the
0.svgicon would be generated as thefa0Iconcomponent with the selectorfa-0-icon.
