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