A versatile icon component system for displaying Material Icons and custom SVGs in web applications, with support for various styles and customization options.

IMPORTANT: Check https://fonts.google.com/icons for the list of available icons, fonts and styles.

Table of Contents

• Installation
• Components
• Basic Usage
• Component API
  • ct-icon
  • ct-icon-button
• Icon Styles
• Styling
• Icon List
• TypeScript Support
• Accessibility
• Follow Me
• Contributing
• License

Installation

Install via npm, yarn, or pnpm:

# npm
npm i @conectate/ct-icon

# yarn
yarn add @conectate/ct-icon

# pnpm
pnpm i @conectate/ct-icon

Components

This package includes the following components:

| Component | Description | | ---------------- | ---------------------------------------------------------------- | | ct-icon | Base icon component for displaying Material Icons or custom SVGs | | ct-icon-button | Icon wrapped in a circular button with hover and active states |

Basic Usage

Material Icons

<!-- Basic icon usage -->
<ct-icon icon="settings"></ct-icon>

<!-- Changing icon style -->
<ct-icon icon="favorite" fontstyle="Fill"></ct-icon>

<!-- Icon with custom size -->
<ct-icon icon="home" style="--ct-icon-size: 36px;"></ct-icon>

Icon Button

<!-- Basic icon button -->
<ct-icon-button icon="search"></ct-icon-button>

<!-- Disabled icon button -->
<ct-icon-button icon="close" disabled></ct-icon-button>

<!-- Icon button with accessibility label -->
<ct-icon-button icon="menu" aria-label="Open menu"></ct-icon-button>

Custom SVG Icons

<!-- Using custom SVG content -->
<ct-icon svg="<svg viewBox='0 0 24 24'><path d='M12 2L2 7l10 5 10-5-10-5z'/></svg>"></ct-icon>

<!-- SVG in icon button -->
<ct-icon-button svg="<svg viewBox='0 0 24 24'><path d='M12 2L2 7l10 5 10-5-10-5z'/></svg>"></ct-icon-button>

Using ES Modules

import { CtIcon } from "@conectate/ct-icon";
import "@conectate/ct-icon";
import "@conectate/ct-icon-button";

// Set global icon font style
CtIcon.FontStyle = "Outlined";
CtIcon.Font = "Symbols";

// Dynamically create an icon
const myIcon = document.createElement("ct-icon");
myIcon.icon = "delete";
document.body.appendChild(myIcon);

Component API

ct-icon

The base icon component that displays Material Icons or custom SVGs.

Properties

| Property | Type | Default | Description | | ----------- | --------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------- | | icon | string | - | Name of the Material Icon to display | | svg | string | - | Custom SVG content if the icon is not available in Material Icons | | font | "Icons" | "Symbols" | "Symbols" | Which icon font family to use | | fontstyle | "Outlined" | "Fill" | "Sharp" | "Two Tone" | "Round" | "Rounded" | "Rounded" | Style variant of the icon | | ready | boolean | false | Whether the font has been loaded (read-only) |

Static Properties

| Property | Type | Default | Description | | ----------- | --------------------------------------------------------------------------------- | ----------- | -------------------------- | | Font | "Icons" | "Symbols" | "Symbols" | Global font family setting | | FontStyle | "Outlined" | "Fill" | "Sharp" | "Two Tone" | "Round" | "Rounded" | "Rounded" | Global font style setting |

Static Methods

| Method | Description | Parameters | Returns | | ------------- | ------------------------------- | ------------------------------------- | ------------------------------ | | loadFonts() | Loads the specified font styles | FontStyle?: string, Font?: string | HTMLLinkElement \| undefined |

ct-icon-button

A button component that displays an icon.

Properties

| Property | Type | Default | Description | | ----------- | --------- | ------- | ------------------------------------------------------------------------- | | icon | string | - | Name of the Material Icon to display | | svg | string | - | Custom SVG content for the button | | disabled | boolean | false | Whether the button is disabled | | ariaLabel | string | "" | Accessible label for the button (falls back to icon name if not provided) |

Icon Styles

The ct-icon component supports different styles from the Material Icons library:

| Style | Description | | ---------- | ----------------------------------- | | Outlined | Icons with an outlined appearance | | Fill | Solid, filled icons | | Sharp | Icons with sharp, straight edges | | Two Tone | Two-tone icons with varying opacity | | Round | Icons with rounded corners | | Rounded | Rounded icon style (default) |

You can set styles globally or per component:

// Global setting
import { CtIcon } from "@conectate/ct-icon";
CtIcon.FontStyle = "Outlined";

// Per component
<ct-icon icon="favorite" fontstyle="Fill"></ct-icon>

Styling

You can customize the components using CSS variables:

ct-icon {
	--ct-icon-size: 24px; /* Icon size (default: 24px) */
}

ct-icon-button {
	/* Inherits --ct-icon-size from ct-icon */
	color: blue; /* Icon color */
}

Icon List

The component provides access to all Material Icons available in the Google Fonts library. You can browse the available icons at:

https://fonts.google.com/icons

When using TypeScript, the package provides type definitions for all available icons, giving you autocomplete support in compatible editors.

TypeScript Support

The package includes full TypeScript definitions and provides autocompletion for icon names:

import { CtIcon } from "@conectate/ct-icon";

// Icon names are typed
const icon = document.createElement("ct-icon");
icon.icon = "settings"; // Autocomplete works here

Accessibility

To ensure your icons are accessible, consider the following best practices:

• Use aria-label for icon buttons to provide a text alternative
• Add title attributes to icons that convey information
• Avoid using icons alone for critical navigation or actions unless properly labeled

<ct-icon-button icon="menu" aria-label="Open navigation menu"></ct-icon-button>

Follow Me

https://x.com/herberthobregon

https://dev.to/herberthobregon

Contributing

1. Fork the repo
2. Create a new branch: git checkout -b feature-branch
3. Commit your changes: git commit -m 'Add new feature'
4. Push to your branch: git push origin feature-branch
5. Open a pull request!

License

See LICENSE