/**
* Modern Icon System - Material Design Icons
* Provides a comprehensive set of SVG icons with consistent styling
*/
// Icon utility functions
export function createIcon(name, className = 'icon') {
const iconSvg = ICONS[name];
if (!iconSvg) {
console.warn(`Icon "${name}" not found`);
return ICONS.help_outline; // Fallback icon
}
return iconSvg.replace('class="icon"', `class="${className}"`);
}
export function getIconElement(name, className = 'icon') {
const div = document.createElement('div');
div.innerHTML = createIcon(name, className);
return div.firstElementChild;
}
// Material Design Icons Collection
export const ICONS = {
// Navigation & UI
close: ``,
menu: ``,
arrow_back: ``,
arrow_forward: ``,
expand_more: ``,
expand_less: ``,
chevron_left: ``,
chevron_right: ``,
// Actions
add: ``,
remove: ``,
edit: ``,
delete: ``,
save: ``,
copy: ``,
refresh: ``,
// Visibility
visibility: ``,
visibility_off: ``,
// Status & Feedback
check: ``,
check_circle: ``,
error: ``,
warning: ``,
info: ``,
// Theme & Settings
light_mode: ``,
dark_mode: ``,
settings: ``,
// File & Data
folder: ``,
folder_open: ``,
description: ``,
upload: ``,
download: ``,
// Communication & Social
share: ``,
link: ``,
// Media & Content
play_arrow: ``,
pause: ``,
stop: ``,
// Search & Filter
search: ``,
filter_list: ``,
sort: ``,
// Help & Support
help: ``,
help_outline: ``,
// Drag & Drop
drag_indicator: ``,
// Network & Connection
wifi: ``,
wifi_off: ``,
// Miscellaneous
more_vert: ``,
more_horiz: ``
};
// Legacy exports for backward compatibility
export const CLOSE_ICON_SVG = ICONS.close;
export const EYE_ICON_SVG = ICONS.visibility;
export const EYE_SLASH_ICON_SVG = ICONS.visibility_off;