IconButton

The IconButton component is a reusable Angular component that combines a button with an icon for interactive UI elements. It offers flexible styling and event handling.

Features

Icon Integration: Supports customizable icons with adjustable size and color.
Event Handling: Emits events on button clicks for easy interaction.
Responsive Design: Allows full-width button configuration for various screen sizes.
Customizable Text: Supports adding button text with custom styling.

Usage

Step 1: Import the Component

Add the IconButtonComponent to your Angular project by including it in your module or component imports array.

import { IconButtonComponent } from "src/app/components/icon-button/icon-button.component";
 
@Component({
  ...
  imports: [..., IconButtonComponent],
  ...
})

Step 2: Add the Template

Include the component in your template:

<icon-button
  [icon]="rocketIcon"
  [iconSize]="32"
  [iconColor]="'#ff5733'"
  [buttonText]="'Launch'"
  [buttonTextClasses]="'font-bold text-lg text-primary'"
  (buttonClicked)="handleLaunch()"
></icon-button>

Configuration

Inputs

The IconButtonComponent accepts the following inputs for customization:

Input	Type	Description
`icon`	`Icon`	The icon to display within the button.
`iconSize`	`number`	The size of the icon in pixels.
`iconColor`	`string`	The color of the icon (CSS-compatible value).
`buttonText`	`string`	The text to display on the button.
`buttonTextClasses`	`string`	Custom CSS classes for the button text.

Outputs

The IconButtonComponent emits the following event:

Output	Description
`buttonClicked`	Fired when the button is clicked.

Example

Create a primary action button with an icon:

<icon-button
  [icon]="rocketIcon"
  [iconSize]="24"
  [iconColor]="'#fff'"
  [buttonText]="'Submit'"
  (buttonClicked)="onSubmit()"
></icon-button>

Icon Integration

Leverage the Lucide library for SVG icons:

import { Rocket } from "lucide-angular";
...
 
public rocketIcon = Rocket;

Add the imported icon to the icon input for seamless integration.

IconButton

On this page