Angular Remix Icon

Use Remix Icons in your angular application

Wrapper for using remix icons in your angular application. All the icons are injected as svgs and you can apply color and sizes to them with ease.

Usage

1. Install the package

npm install angular-remix-icon

2. Import the module to App Module

import { RemixIconModule } from "angular-remix-icon";

3. Import Required Icons

For the library to work, the required icons needs to be configured first

...
import {
  RiAncientGateFill,
  RiHome2Fill,
  RemixIconModule,
} from 'angular-remix-icon';

// Configure the required icons before hand
const icons = {
  RiAncientGateFill,
  RiHome2Fill,
};

@NgModule({
  imports: [
    BrowserModule,
    RemixIconModule.configure(icons),
  ],
  ...
})
export class AppModule {}

You can get the name from the Remix Icon website

The required icons can be imported as see above. For eg: If you need the home-3-line, You have to import the corresponding Icon:

import { RiHome3Line } from "angular-remix-icon";

4. Use in template

You can now start using the icons like so:

<rmx-icon name="home-3-line"></rmx-icon>

Styling

If you want change color or size of the icons,

<rmx-icon name="home-3-line" style="color:blue"></rmx-icon>

.blue-icon {
  color: blue;
}
.large-icon {
  width: 30px;
  height: 30px;
}

<rmx-icon name="home-3-line" class="blue-icon large-icon"></rmx-icon>

Versions

Angular	Angular Remix Icon
>= v18	v8
v16 & v17	v6
v15	v5
v14	v4
v13	v3
v12	v2

v8 we switched to signal input for icons.

🤝 Contributing

Contributions, issues and feature requests are welcome.
Feel free to check issues page if you want to contribute.

Author

👤 Adithya Sreyaj

Twitter: @AdiSreyaj
Github: @adisreyaj

👍🏼 Show your support

Please ⭐️ this repository if this project helped you!

📝 License

This project is Apache License 2.0 licensed.

adisreyaj/angular-remix-icon