How to use remix icons in Angular
Remix Icons is one of the best icon libraries out there. To use it in Angular, we can use the @nginf/iconic (Iconic for short ) library, which provides tiny, performant components for all the Remix Icons.
Usage
to use Remix Icons from Iconic, let’s install the proper npm package first. Run the following npm command:
npm install @nginf/iconic-ri
this will install all the icon components of Remix Icons. that’s it now we can use the icons we need In the project.
For example, if you want to use close icon in your project, import the icon component and then use it in your template, like this:
import { CloseIcon } from '@nginf/iconic-ri';
@Component({
selector:"app-some",
imports:[CloseIcon]
template:` <close-icon> </close-icon>`
})
export class SomeComponent{
}Because under-the-hood component renders the SVG itself, you can manipulate different attributes of SVG. For example if you want to make your icon red just set the color to the icon component
<close-icon class="red-color"> </close-icon>
