Skip to content

adisreyaj/angular-remix-icon

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
August 15, 2023 21:14
October 29, 2020 22:42
November 26, 2021 22:07
October 31, 2020 22:43
October 31, 2020 22:43
August 15, 2023 21:17
August 15, 2023 21:14
October 29, 2020 22:42

Angular Remix Icon

Angular Remix Icon

angular License: Apache License 2.0 Twitter: Adithya Sreyaj

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

Angular Remix Icon

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>

or

.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
v16 v6
v15 v5
v14 v4
v13 v3
v12 v2

From version angular-remix-icon@3 package get shipped in the new Angular Package Format introduced as part of Angular v13.

Read here: https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296

🀝 Contributing

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

Author

πŸ‘€ Adithya Sreyaj

πŸ‘πŸΌ Show your support

Please ⭐️ this repository if this project helped you!

πŸ“ License

Copyright Β© 2020 Adithya Sreyaj.

This project is Apache License 2.0 licensed.