@masterteam/icons

A lightweight, performant, and easy-to-use SVG icon library for modern Angular applications.

@masterteam/icons allows you to dynamically load and cache a curated set of SVG icons in your Angular application without any heavy dependencies. It's built with Signals for maximum performance and a minimal footprint.

✨ Features

• Featherweight: No external dependencies besides Angular itself.
• Dynamic Loading: Icons are fetched via HTTP and not bundled directly, keeping your initial bundle size small.
• Performant Caching: Icons are cached after the first load to prevent redundant network requests.
• Easy to Style: Effortlessly control icon size and color using standard CSS properties.
• Modern Angular: Built with Standalone Components and Signals for a simple, declarative API.

📦 Installation

pnpm add @masterteam/icons

⚙️ Setup

Follow these two steps to get @masterteam/icons working in your application.

1. Import the Component

The Icon is standalone, so you can import it directly into any component or module where you need it.

// in your-component.ts
import { Component } from '@angular/core';
import { Icon } from '@masterteam/icons';

@Component({
  selector: 'app-my-feature',
  standalone: true,
  imports: [
    Icon // <-- Import here
  ],
  template: `
    <h2>My Feature</h2>
    <mt-icon icon="home"></mt-icon>
  `,
})
export class MyFeatureComponent {}

2. Configure Assets in angular.json

For the library's icons to be available to your application, you must configure your angular.json file to copy them into your project's build assets.

// in angular.json
"projects": {
  "your-app-name": {
    "architect": {
      "build": {
        "options": {
          "assets": [
            "src/assets",
            "src/favicon.ico",
            {
              "glob": "**/*",
              "input": "./node_modules/@masterteam/icons/assets/",
              "output": "/assets/"
            }
          ],
          // ...
        }
      }
    }
  }
}

🚀 Usage

Use the <mt-icon> component and pass the name of the icon (without the .svg extension) from the library's provided set.

<p>
  Welcome to the <mt-icon icon="home"></mt-icon> dashboard!
</p>

<button>
  <mt-icon icon="settings"></mt-icon>
  Go to Settings
</button>

<button style="color: red;">
  <mt-icon icon="trash"></mt-icon>
  Delete Item
</button>

🎨 Styling

Styling icons is intuitive and works with standard CSS. For best results, the library's source SVGs have their fill attribute set to currentColor.

Changing Color

Icons inherit their color from the parent CSS color property.

/* Styles for a component using the icon */
.delete-button {
  color: #E53E3E; /* Red */
}

.delete-button:hover {
  color: #C53030; /* Darker Red */
}

<button class="delete-button">
  <mt-icon icon="trash"></mt-icon>
  Delete
</button>

Changing Size

The easiest way to control size is by setting the font-size on the component or a parent element. The icon will scale proportionally.

.profile-header {
  font-size: 3rem; /* The icon will be 3rem x 3rem */
}

<div class="profile-header">
  <mt-icon icon="user-circle"></mt-icon> Welcome Back
</div>

⚙️ API Reference

| Input | Type | Required | Description | | :----- | :------- | :------- | :------------------------------------------------------------- | | icon | string | Yes | The name of the icon file (without .svg) provided by the library. |

🤝 Contributing

Contributions are welcome! Please feel free to open an issue or submit a pull request.

📄 License

This project is licensed under the MIT License.