ag-design 1.0.82 → 1.0.83

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -321,7 +321,7 @@
321
321
  <div class="icon-card" onclick="copyToClipboard('${classname}')">
322
322
  <div class="icon-glyph"><i class="${classname}"></i></div>
323
323
  <div class="icon-name">${name}</div>
324
- <div class="icon-code">${glyph}</div>
324
+ <div class="icon-code">${classname}</div>
325
325
  </div>
326
326
  `;
327
327
  });
@@ -0,0 +1,174 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AG Icons - All 362 Icons</title>
7
+ <style>
8
+ * { margin: 0; padding: 0; box-sizing: border-box; }
9
+ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; color: #333; }
10
+
11
+ .container { max-width: 1400px; margin: 0 auto; padding: 30px 20px; }
12
+
13
+ header { background: white; padding: 30px; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
14
+ h1 { font-size: 28px; margin-bottom: 10px; }
15
+ .subtitle { color: #666; }
16
+
17
+ .controls { background: white; padding: 20px; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
18
+ input, select { padding: 10px; border: 0.5px solid #ddd; border-radius: 4px; font-size: 14px; }
19
+ input:focus, select:focus { outline: none; border-color: #4CAF50; }
20
+
21
+ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; }
22
+ .stat { background: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
23
+ .stat-num { font-size: 32px; font-weight: bold; color: #4CAF50; }
24
+ .stat-label { color: #999; font-size: 12px; margin-top: 5px; }
25
+
26
+ .category { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
27
+ .category-header { font-size: 18px; font-weight: 600; color: #333; border-bottom: 2px solid #4CAF50; padding-bottom: 10px; margin-bottom: 15px; }
28
+
29
+ .icon-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
30
+ .icon-row { background: #f9f9f9; padding: 12px; border-radius: 4px; border: 1px solid #eee; }
31
+ .icon-class { font-family: monospace; font-size: 12px; font-weight: 500; color: #333; word-break: break-all; }
32
+ .icon-glyph { font-size: 11px; color: #999; margin-top: 4px; }
33
+
34
+ .hidden { display: none !important; }
35
+
36
+ @media (max-width: 768px) {
37
+ .controls { grid-template-columns: 1fr; }
38
+ .icon-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
39
+ .stat { font-size: 14px; }
40
+ .stat-num { font-size: 24px; }
41
+ }
42
+ </style>
43
+ </head>
44
+ <body>
45
+ <div class="container">
46
+ <header>
47
+ <h1>🎨 AG Icons - Complete Library</h1>
48
+ <p class="subtitle">All 362 icons with class names and glyph codes</p>
49
+ </header>
50
+
51
+ <div class="stats">
52
+ <div class="stat">
53
+ <div class="stat-num" id="totalCount">362</div>
54
+ <div class="stat-label">Total Icons</div>
55
+ </div>
56
+ <div class="stat">
57
+ <div class="stat-num" id="categoryCount">20</div>
58
+ <div class="stat-label">Categories</div>
59
+ </div>
60
+ <div class="stat">
61
+ <div class="stat-num" id="displayCount">362</div>
62
+ <div class="stat-label">Displayed</div>
63
+ </div>
64
+ </div>
65
+
66
+ <div class="controls">
67
+ <input type="text" id="searchInput" placeholder="Search icon name or class..." />
68
+ <select id="categoryFilter">
69
+ <option value="">All Categories</option>
70
+ </select>
71
+ </div>
72
+
73
+ <div id="content"></div>
74
+ </div>
75
+
76
+ <script>
77
+ const iconData = {
78
+ "account": { "account-balance": "f254", "account-box": "f253", "account-circle": "f252", "account_balance_wallet": "f251", "chart-user": "f250", "person": "f24f", "supervisor-account": "f24e", "supervisor": "f24d", "user-tie": "f24c", "user": "f24b", "users-solid": "f24a" },
79
+ "actions": { "add": "f249", "backspace": "f248", "ban": "f247", "bookmark-solid": "f246", "check-circle-o": "f245", "circle-check-regular": "f244", "clear-all": "f243", "close": "f242", "compare": "f241", "content_copy": "f240", "delete-left": "f23f", "delete-right": "f23e", "delete": "f23d", "description": "f23c", "done-all": "f23b", "done": "f23a", "download": "f239", "edit": "f238", "error-outline": "f237", "favorite-outline": "f236", "favorite": "f235", "file-circle-plus": "f234", "file-pen": "f233", "file-pen1": "f232", "flipbook": "f231", "memo": "f230", "menu": "f22f", "more-vert": "f22e", "notifications": "f22d", "pdffile": "f22c", "pen": "f22b", "penfill": "f22a", "picture_in_picture": "f229", "print": "f228", "refresh": "f227", "remove": "f226", "save": "f225", "search": "f224", "select_all": "f223", "settings-input": "f222", "settings": "f221", "share": "f220", "thumb-up-alt": "f21f", "thumbs-down": "f21e", "thumbs-down1": "f21d", "thumbs-up": "f21c", "thumbs-up1": "f21b", "times-circle": "f21a", "trash-fill": "f219", "trash": "f218", "update": "f217", "upload": "f216", "visibility-off": "f215", "visibility": "f214" },
80
+ "alignment": { "align-center": "f212", "align-justify": "f211", "align-left": "f210", "align-right": "f20f" },
81
+ "color": { "blockquote": "f26a", "bold": "f269", "clean-format": "f268", "code-block": "f267", "color-background-fixed": "f257", "color-background": "f256", "color-lens": "f255" },
82
+ "communication": { "chat": "f20b", "email": "f20a", "envelope-normal": "f209", "envelope-round": "f208", "envelope-square": "f207", "envelope": "f206", "phone-iphone": "f205", "phone-ring": "f204", "phone-round": "f203", "phone-square": "f202", "phone-square1": "f201", "phone": "f200", "phone1": "f1ff", "phone2": "f1fe" },
83
+ "direction": { "direction-ltr": "f1fd", "direction-rtl": "f1fc" },
84
+ "finance": { "attach-money": "f1fb", "briefcase-solid": "f1fa", "business": "f1f9", "chart-column": "f1f8", "dns": "f1f7", "enterprise-network": "f1f6", "loyalty": "f1f5", "trending-up": "f1f4" },
85
+ "formatting": { "bold": "f1f3", "clean-format": "f1f2", "italic": "f1f1", "strikethrough": "f1f0", "subscript": "f1ef", "superscript": "f1ee", "underline": "f1ed" },
86
+ "history": { "redo": "f1ec", "undo": "f1eb" },
87
+ "insert": { "blockquote": "f1ea", "code-block": "f1e9", "formula": "f1e8", "image": "f1e7", "link": "f1e6" },
88
+ "layout-ui": { "3d_rotation": "f1e4", "border-bottom": "f1e3", "draw-circle": "f1e2", "draw-polygon": "f1e1", "draw-square": "f1e0", "flip-horizontal": "f1df", "flip-vertical": "f1de", "grid": "f1dd", "grid-off": "f1dc", "margin": "f1db", "padding": "f1da", "rotate-left": "f1d9", "rotate-right": "f1d8", "text-fields": "f1d7", "view-agenda": "f1d6", "view-comfy": "f1d5", "view-list": "f1d4", "view-stream": "f1d3", "web": "f1d2" },
89
+ "lists": { "indent-decrease": "f1d1", "indent-increase": "f1d0", "list-bullet": "f1cf", "list-ordered": "f1ce" },
90
+ "location": { "city": "f1cd", "destination": "f1cc", "directions": "f1cb", "directionsbus": "f1ca", "driving": "f1c9", "edit-location": "f1c8", "ev-station": "f1c7", "flight-takeoff": "f1c6", "hotel": "f1c5", "layers": "f1c4", "layers-clear": "f1c3", "local-activity": "f1c2", "local-airport": "f1c1", "local-bar": "f1c0", "local-cafe": "f1bf", "local-dining": "f1be", "local-gas-station": "f1bd", "local-grocery-store": "f1bc", "local-hospital": "f1bb", "local-laundry-service": "f1ba", "local-library": "f1b9", "local-mall": "f1b8" },
91
+ "media": { "camera1": "f1b7", "collectionsphoto-library": "f1b6", "imageupload": "f1b5", "pause": "f1b4", "play-circle-outline": "f1b3", "play": "f1b2", "recent-actors": "f1b1", "slideshow": "f1b0", "stop": "f1af" },
92
+ "misc": { "alarm-clock": "f1ae", "book-open-cover": "f1ad", "chrome-reader-mode": "f1ac", "cloud_download": "f1ab", "color-lenspalette": "f1aa", "dashboard": "f1a9", "data-usage": "f1a8", "dev-icons": "f1a7", "devices": "f1a6", "devices-other": "f1a5", "event-note": "f1a4", "extension": "f1a3", "find-in-page": "f1a2", "fingerprint": "f1a1", "get-app": "f1a0", "gif": "f19f", "grade": "f19e", "group-work": "f19d", "highlight-off": "f19c", "input": "f19b", "language": "f19a", "lightbulb": "f199", "line-style": "f198", "line-weight": "f197", "loyalty": "f196" },
93
+ "navigation": { "angle-double-left": "f195", "angle-double-right": "f194", "arrow-down-arrow-up": "f193", "arrow-down-short-wide": "f192", "arrow-down": "f191", "arrow-left": "f190", "arrow-right": "f18f", "arrow-up": "f18e", "arrows-alt-h": "f18d", "arrows-alt-v": "f18c", "arrows-alt": "f18b", "arrows-h": "f18a", "arrows-v": "f189", "bars": "f188", "chevron-circle-down": "f187", "chevron-circle-left": "f186", "chevron-circle-right": "f185", "chevron-circle-up": "f184", "chevron-down": "f183", "chevron-left": "f182", "chevron-right": "f181", "chevron-up": "f180", "caret-down": "f17f", "caret-left": "f17e", "caret-right": "f17d", "caret-up": "f17c" },
94
+ "real-estate": { "acres": "f17a", "bath": "f179", "bathtub": "f178", "bed": "f177", "bed1": "f176", "bedroom": "f175", "buildings": "f174", "cabin": "f173", "door": "f172", "door-sliding": "f171", "door-swinging": "f170", "doorbell": "f16f", "fence": "f16e", "garage": "f16d", "garage-door": "f16c", "garage-open": "f16b", "gate": "f16a", "gazebo": "f169", "guest-house": "f168" },
95
+ "social-media": { "Al": "f166", "Instagram-round": "f165", "Messenger-round": "f164", "Messenger-square": "f163", "Snapchat-round": "f162", "Snapchat-square": "f161", "Telegram-round": "f160", "Telegram-square": "f15f", "Viber-round": "f15e", "Viber-square": "f15d", "Whatsapp-round": "f15c", "Whatsapp-square": "f15b", "facebook-box": "f15a", "facebook-f": "f159", "facebook": "f158", "google": "f157", "instagram": "f156", "linkedin": "f155", "pinterest-box": "f154", "pinterest-p": "f153", "pinterest": "f152", "reddit": "f151", "skype": "f150", "slack-hashtag": "f14f", "snapchat": "f14e", "spotify": "f14d", "telegram": "f14c", "twitter": "f14b", "vimeo": "f14a", "vine": "f149", "whatsapp": "f148", "youtube-play": "f147", "youtube": "f146" },
96
+ "text-editor": { "align-center": "f130", "align-justify": "f12f", "align-left": "f12e", "align-right": "f12d", "blockquote": "f12c", "bold": "f12b", "clean-format": "f12a", "code-block": "f129", "color-background": "f128", "color-text": "f127", "direction-ltr": "f126", "direction-rtl": "f125", "edit": "f124", "format-clear": "f123", "header": "f122", "header-1": "f121", "header-2": "f120", "header-3": "f11f", "header-4": "f11e", "header-5": "f11d", "header-6": "f11c", "highlight": "f11b", "indent-decrease": "f11a", "indent-increase": "f119", "italic": "f118", "link": "f117", "list-bullet": "f116", "list-ordered": "f115", "picker-arrows": "f114", "redo": "f113", "strikethrough": "f112", "subscript": "f111", "superscript": "f110", "underline": "f10f", "undo": "f10e" },
97
+ "weather": { "wi-day-cloudy": "f114", "wi-day-rain-mix": "f113", "wi-day-rain": "f112", "wi-day-sleet-storm": "f111", "wi-day-storm-showers": "f110", "wi-day-sunny": "f10f", "wi-day-thunderstorm": "f10e", "wi-dewpoint": "f10d", "wi-humidity": "f10c", "wi-night-alt-cloudy": "f10b", "wi-night-alt-rain-mix": "f10a", "wi-night-alt-thunderstorm": "f109", "wi-night-clear": "f108", "wi-night-rain": "f107", "wi-night-sleet-storm": "f106", "wi-night-storm-showers": "f105", "wi-raindrop": "f104", "wi-strong-wind": "f103", "wi-thermometer": "f102" }
98
+ };
99
+
100
+ const searchInput = document.getElementById('searchInput');
101
+ const categoryFilter = document.getElementById('categoryFilter');
102
+ const content = document.getElementById('content');
103
+ const displayCount = document.getElementById('displayCount');
104
+
105
+ // Populate category filter
106
+ Object.keys(iconData).sort().forEach(cat => {
107
+ const option = document.createElement('option');
108
+ option.value = cat;
109
+ option.textContent = cat.charAt(0).toUpperCase() + cat.slice(1);
110
+ categoryFilter.appendChild(option);
111
+ });
112
+
113
+ function renderIcons() {
114
+ const searchTerm = searchInput.value.toLowerCase();
115
+ const selectedCategory = categoryFilter.value;
116
+
117
+ content.innerHTML = '';
118
+ let displayedCount = 0;
119
+
120
+ Object.keys(iconData).sort().forEach(category => {
121
+ if (selectedCategory && selectedCategory !== category) return;
122
+
123
+ const icons = iconData[category];
124
+ const filteredIcons = Object.entries(icons).filter(([name, glyph]) => {
125
+ const className = `aga-${category}-${name}`;
126
+ return name.includes(searchTerm) || className.includes(searchTerm);
127
+ });
128
+
129
+ if (filteredIcons.length === 0) return;
130
+
131
+ const categoryDiv = document.createElement('div');
132
+ categoryDiv.className = 'category';
133
+
134
+ const header = document.createElement('div');
135
+ header.className = 'category-header';
136
+ header.textContent = `${category.charAt(0).toUpperCase() + category.slice(1)} (${filteredIcons.length})`;
137
+ categoryDiv.appendChild(header);
138
+
139
+ const list = document.createElement('div');
140
+ list.className = 'icon-list';
141
+
142
+ filteredIcons.forEach(([name, glyph]) => {
143
+ const className = `aga-${category}-${name}`;
144
+ const row = document.createElement('div');
145
+ row.className = 'icon-row';
146
+ row.innerHTML = `
147
+ <div class="icon-class">${className}</div>
148
+ <div class="icon-glyph">\\${glyph}</div>
149
+ `;
150
+ row.style.cursor = 'pointer';
151
+ row.onclick = () => {
152
+ navigator.clipboard.writeText(className);
153
+ row.style.background = '#e8f5e9';
154
+ setTimeout(() => { row.style.background = '#f9f9f9'; }, 200);
155
+ };
156
+ list.appendChild(row);
157
+ displayedCount++;
158
+ });
159
+
160
+ categoryDiv.appendChild(list);
161
+ content.appendChild(categoryDiv);
162
+ });
163
+
164
+ displayCount.textContent = displayedCount;
165
+ }
166
+
167
+ searchInput.addEventListener('input', renderIcons);
168
+ categoryFilter.addEventListener('change', renderIcons);
169
+
170
+ // Initial render
171
+ renderIcons();
172
+ </script>
173
+ </body>
174
+ </html>
@@ -0,0 +1,163 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>AG Icons Font Debug</title>
6
+ <link rel="stylesheet" href="ag-icons.css">
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ padding: 40px;
11
+ background: #f5f5f5;
12
+ line-height: 1.6;
13
+ }
14
+ .test-section {
15
+ background: white;
16
+ padding: 20px;
17
+ margin: 20px 0;
18
+ border-radius: 8px;
19
+ border-left: 4px solid #4CAF50;
20
+ }
21
+ .test-row {
22
+ display: grid;
23
+ grid-template-columns: 100px 1fr 1fr;
24
+ gap: 20px;
25
+ padding: 15px;
26
+ border-bottom: 1px solid #eee;
27
+ align-items: center;
28
+ }
29
+ .test-row:last-child { border-bottom: none; }
30
+ .icon-cell {
31
+ font-size: 32px;
32
+ min-height: 40px;
33
+ display: flex;
34
+ align-items: center;
35
+ justify-content: center;
36
+ }
37
+ .code-cell {
38
+ font-family: monospace;
39
+ font-size: 12px;
40
+ color: #666;
41
+ }
42
+ h2 { margin-top: 30px; }
43
+ .font-check {
44
+ font-family: ag-icons;
45
+ font-size: 24px;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body>
50
+ <h1>🔍 AG Icons Font Debugging</h1>
51
+
52
+ <div class="test-section">
53
+ <h2>Test 1: CSS :before Pseudo-Elements</h2>
54
+ <p>These use the ag-icons.css stylesheet with :before content</p>
55
+ <div class="test-row">
56
+ <div class="code-cell">CSS</div>
57
+ <div class="code-cell">Icon Class</div>
58
+ <div class="icon-cell">
59
+ <i class="aga-actions-add"></i>
60
+ </div>
61
+ </div>
62
+ <div class="test-row">
63
+ <div class="code-cell">Expected: ✓</div>
64
+ <div class="code-cell">aga-actions-add</div>
65
+ <div class="icon-cell">
66
+ <i class="aga-actions-search"></i>
67
+ </div>
68
+ </div>
69
+ <div class="test-row">
70
+ <div class="code-cell">Codepoint: f1f5</div>
71
+ <div class="code-cell">aga-weather-wi-sunny</div>
72
+ <div class="icon-cell">
73
+ <i class="aga-weather-wi-day-sunny"></i>
74
+ </div>
75
+ </div>
76
+ </div>
77
+
78
+ <div class="test-section">
79
+ <h2>Test 2: Direct HTML Entity (CSS Font Applied)</h2>
80
+ <p>Using HTML entities with ag-icons font applied directly</p>
81
+ <div class="test-row">
82
+ <div class="code-cell">&#xf101;</div>
83
+ <div class="code-cell">Glyph f101</div>
84
+ <div class="icon-cell font-check">&#xf101;</div>
85
+ </div>
86
+ <div class="test-row">
87
+ <div class="code-cell">&#xf102;</div>
88
+ <div class="code-cell">Glyph f102</div>
89
+ <div class="icon-cell font-check">&#xf102;</div>
90
+ </div>
91
+ <div class="test-row">
92
+ <div class="code-cell">&#xf254;</div>
93
+ <div class="code-cell">Glyph f254</div>
94
+ <div class="icon-cell font-check">&#xf254;</div>
95
+ </div>
96
+ <div class="test-row">
97
+ <div class="code-cell">&#x61697;</div>
98
+ <div class="code-cell">Glyph 61697 (decimal)</div>
99
+ <div class="icon-cell font-check">&#x61697;</div>
100
+ </div>
101
+ </div>
102
+
103
+ <div class="test-section">
104
+ <h2>Test 3: Font @font-face Declaration</h2>
105
+ <pre style="background: #f5f5f5; padding: 10px; overflow-x: auto;">
106
+ @font-face {
107
+ font-family: 'ag-icons';
108
+ src: url('./ag-icons.woff2') format('woff2'),
109
+ url('./ag-icons.woff') format('woff'),
110
+ url('./ag-icons.ttf') format('truetype');
111
+ }
112
+ </pre>
113
+ <p style="color: #666; margin-top: 10px;">
114
+ Check browser DevTools > Network tab:
115
+ <ul>
116
+ <li>✓ ag-icons.woff2 should show 200 OK</li>
117
+ <li>✓ ag-icons.css should show 200 OK</li>
118
+ <li>Check Font tab in DevTools to see what glyphs are in the font</li>
119
+ </ul>
120
+ </p>
121
+ </div>
122
+
123
+ <div class="test-section">
124
+ <h2>Test 4: Debugging Info</h2>
125
+ <p>Open DevTools (F12) and check:</p>
126
+ <ul>
127
+ <li><strong>Console tab:</strong> Look for any CSS/font loading errors</li>
128
+ <li><strong>Network tab:</strong> Check that ag-icons.woff2, ag-icons.css load with 200 status</li>
129
+ <li><strong>Elements tab:</strong> Inspect the icons to see what content is being rendered</li>
130
+ <li><strong>Application > Fonts:</strong> Check which fonts are available</li>
131
+ </ul>
132
+ <p style="background: #fff3cd; padding: 10px; border-radius: 4px;">
133
+ <strong>Note:</strong> If Test 2 doesn't show any glyphs, the font file may not contain the expected glyphs or is corrupted.
134
+ </p>
135
+ </div>
136
+
137
+ <div class="test-section">
138
+ <h2>Test 5: Font File Info</h2>
139
+ <ul>
140
+ <li>Font file: ag-icons.woff2 (28 KB)</li>
141
+ <li>CSS file: ag-icons.css (19 KB)</li>
142
+ <li>Total icons: 362</li>
143
+ <li>Starting codepoint: f101 (61697)</li>
144
+ <li>Ending codepoint: f26e (62062)</li>
145
+ <li>Font family name: ag-icons</li>
146
+ <li>Prefix: aga-</li>
147
+ </ul>
148
+ </div>
149
+
150
+ <script>
151
+ console.log('Debugging AG Icons Font...');
152
+ console.log('Font files loaded from:', window.location.href);
153
+
154
+ // Try to detect if font is loaded
155
+ const testEl = document.createElement('span');
156
+ testEl.style.fontFamily = 'ag-icons';
157
+ testEl.textContent = '';
158
+ document.body.appendChild(testEl);
159
+ const fontLoaded = window.getComputedStyle(testEl).fontFamily.includes('ag-icons');
160
+ console.log('ag-icons font available:', fontLoaded);
161
+ </script>
162
+ </body>
163
+ </html>
@@ -0,0 +1,195 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AG Icons Preview - All 362 Icons</title>
7
+ <style>
8
+ @font-face {
9
+ font-family: 'ag-icons';
10
+ font-display: swap;
11
+ font-style: normal;
12
+ font-weight: 400;
13
+ src: url('./ag-icons.woff2') format('woff2'),
14
+ url('./ag-icons.woff') format('woff'),
15
+ url('./ag-icons.ttf') format('truetype');
16
+ }
17
+
18
+ * { margin: 0; padding: 0; box-sizing: border-box; }
19
+ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; color: #333; }
20
+
21
+ .container { max-width: 1400px; margin: 0 auto; padding: 30px 20px; }
22
+
23
+ header { background: white; padding: 30px; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
24
+ h1 { font-size: 28px; margin-bottom: 10px; }
25
+
26
+ .controls { background: white; padding: 20px; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
27
+ input, select { padding: 10px; border: 0.5px solid #ddd; border-radius: 4px; font-size: 14px; }
28
+
29
+ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; }
30
+ .stat { background: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
31
+ .stat-num { font-size: 32px; font-weight: bold; color: #4CAF50; }
32
+ .stat-label { color: #999; font-size: 12px; margin-top: 5px; }
33
+
34
+ .category { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
35
+ .category-header { font-size: 18px; font-weight: 600; color: #333; border-bottom: 2px solid #4CAF50; padding-bottom: 10px; margin-bottom: 15px; }
36
+
37
+ .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; }
38
+ .icon-box { background: #f9f9f9; padding: 15px; border-radius: 4px; border: 1px solid #eee; text-align: center; cursor: pointer; transition: all 0.2s; }
39
+ .icon-box:hover { background: #e8f5e9; border-color: #4CAF50; }
40
+ .icon-display { font-size: 48px; margin-bottom: 10px; min-height: 60px; display: flex; align-items: center; justify-content: center; }
41
+ .icon-name { font-size: 11px; color: #666; word-break: break-word; margin-bottom: 5px; }
42
+ .icon-class { font-size: 10px; color: #999; font-family: monospace; word-break: break-all; }
43
+
44
+ .hidden { display: none !important; }
45
+
46
+ @media (max-width: 768px) {
47
+ .controls { grid-template-columns: 1fr; }
48
+ .icon-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
49
+ .icon-display { font-size: 32px; }
50
+ }
51
+ </style>
52
+ </head>
53
+ <body>
54
+ <div class="container">
55
+ <header>
56
+ <h1>🎨 AG Icons - Visual Preview</h1>
57
+ <p>All 362 icons with live preview - Click any icon to copy class name</p>
58
+ </header>
59
+
60
+ <div class="stats">
61
+ <div class="stat">
62
+ <div class="stat-num">362</div>
63
+ <div class="stat-label">Total Icons</div>
64
+ </div>
65
+ <div class="stat">
66
+ <div class="stat-num">20</div>
67
+ <div class="stat-label">Categories</div>
68
+ </div>
69
+ <div class="stat">
70
+ <div class="stat-num" id="displayCount">362</div>
71
+ <div class="stat-label">Displayed</div>
72
+ </div>
73
+ </div>
74
+
75
+ <div class="controls">
76
+ <input type="text" id="searchInput" placeholder="Search icon name..." />
77
+ <select id="categoryFilter">
78
+ <option value="">All Categories</option>
79
+ </select>
80
+ </div>
81
+
82
+ <div id="content"></div>
83
+ </div>
84
+
85
+ <script>
86
+ const iconData = {
87
+ "account": { "account-balance": "f254", "account-box": "f253", "account-circle": "f252", "account_balance_wallet": "f251", "chart-user": "f250", "person": "f24f", "supervisor-account": "f24e", "supervisor": "f24d", "user-tie": "f24c", "user": "f24b", "users-solid": "f24a" },
88
+ "actions": { "add": "f249", "backspace": "f248", "ban": "f247", "bookmark-solid": "f246", "check-circle-o": "f245", "circle-check-regular": "f244", "clear-all": "f243", "close": "f242", "compare": "f241", "content_copy": "f240", "delete-left": "f23f", "delete-right": "f23e", "delete": "f23d", "description": "f23c", "done-all": "f23b", "done": "f23a", "download": "f239", "edit": "f238", "error-outline": "f237", "favorite-outline": "f236", "favorite": "f235", "file-circle-plus": "f234", "file-pen": "f233", "file-pen1": "f232", "flipbook": "f231", "memo": "f230", "menu": "f22f", "more-vert": "f22e", "notifications": "f22d", "pdffile": "f22c", "pen": "f22b", "penfill": "f22a", "picture_in_picture": "f229", "print": "f228", "refresh": "f227", "remove": "f226", "save": "f225", "search": "f224", "select_all": "f223", "settings-input": "f222", "settings": "f221", "share": "f220", "thumb-up-alt": "f21f", "thumbs-down": "f21e", "thumbs-down1": "f21d", "thumbs-up": "f21c", "thumbs-up1": "f21b", "times-circle": "f21a", "trash-fill": "f219", "trash": "f218", "update": "f217", "upload": "f216", "visibility-off": "f215", "visibility": "f214" },
89
+ "alignment": { "align-center": "f212", "align-justify": "f211", "align-left": "f210", "align-right": "f20f" },
90
+ "color": { "blockquote": "f26a", "bold": "f269", "clean-format": "f268", "code-block": "f267", "color-background-fixed": "f257", "color-background": "f256", "color-lens": "f255" },
91
+ "communication": { "chat": "f20b", "email": "f20a", "envelope-normal": "f209", "envelope-round": "f208", "envelope-square": "f207", "envelope": "f206", "phone-iphone": "f205", "phone-ring": "f204", "phone-round": "f203", "phone-square": "f202", "phone-square1": "f201", "phone": "f200", "phone1": "f1ff", "phone2": "f1fe" },
92
+ "direction": { "direction-ltr": "f1fd", "direction-rtl": "f1fc" },
93
+ "finance": { "attach-money": "f1fb", "briefcase-solid": "f1fa", "business": "f1f9", "chart-column": "f1f8", "dns": "f1f7", "enterprise-network": "f1f6", "loyalty": "f1f5", "trending-up": "f1f4" },
94
+ "formatting": { "bold": "f1f3", "clean-format": "f1f2", "italic": "f1f1", "strikethrough": "f1f0", "subscript": "f1ef", "superscript": "f1ee", "underline": "f1ed" },
95
+ "history": { "redo": "f1ec", "undo": "f1eb" },
96
+ "insert": { "blockquote": "f1ea", "code-block": "f1e9", "formula": "f1e8", "image": "f1e7", "link": "f1e6" },
97
+ "layout-ui": { "3d_rotation": "f1e4", "border-bottom": "f1e3", "draw-circle": "f1e2", "draw-polygon": "f1e1", "draw-square": "f1e0", "flip-horizontal": "f1df", "flip-vertical": "f1de", "grid": "f1dd", "grid-off": "f1dc", "margin": "f1db", "padding": "f1da", "rotate-left": "f1d9", "rotate-right": "f1d8", "text-fields": "f1d7", "view-agenda": "f1d6", "view-comfy": "f1d5", "view-list": "f1d4", "view-stream": "f1d3", "web": "f1d2" },
98
+ "lists": { "indent-decrease": "f1d1", "indent-increase": "f1d0", "list-bullet": "f1cf", "list-ordered": "f1ce" },
99
+ "location": { "city": "f1cd", "destination": "f1cc", "directions": "f1cb", "directionsbus": "f1ca", "driving": "f1c9", "edit-location": "f1c8", "ev-station": "f1c7", "flight-takeoff": "f1c6", "hotel": "f1c5", "layers": "f1c4", "layers-clear": "f1c3", "local-activity": "f1c2", "local-airport": "f1c1", "local-bar": "f1c0", "local-cafe": "f1bf", "local-dining": "f1be", "local-gas-station": "f1bd", "local-grocery-store": "f1bc", "local-hospital": "f1bb", "local-laundry-service": "f1ba", "local-library": "f1b9", "local-mall": "f1b8" },
100
+ "media": { "camera1": "f1b7", "collectionsphoto-library": "f1b6", "imageupload": "f1b5", "pause": "f1b4", "play-circle-outline": "f1b3", "play": "f1b2", "recent-actors": "f1b1", "slideshow": "f1b0", "stop": "f1af" },
101
+ "misc": { "alarm-clock": "f1ae", "book-open-cover": "f1ad", "chrome-reader-mode": "f1ac", "cloud_download": "f1ab", "color-lenspalette": "f1aa", "dashboard": "f1a9", "data-usage": "f1a8", "dev-icons": "f1a7", "devices": "f1a6", "devices-other": "f1a5", "event-note": "f1a4", "extension": "f1a3", "find-in-page": "f1a2", "fingerprint": "f1a1", "get-app": "f1a0", "gif": "f19f", "grade": "f19e", "group-work": "f19d", "highlight-off": "f19c", "input": "f19b", "language": "f19a", "lightbulb": "f199", "line-style": "f198", "line-weight": "f197", "loyalty": "f196" },
102
+ "navigation": { "angle-double-left": "f195", "angle-double-right": "f194", "arrow-down-arrow-up": "f193", "arrow-down-short-wide": "f192", "arrow-down": "f191", "arrow-left": "f190", "arrow-right": "f18f", "arrow-up": "f18e", "arrows-alt-h": "f18d", "arrows-alt-v": "f18c", "arrows-alt": "f18b", "arrows-h": "f18a", "arrows-v": "f189", "bars": "f188", "chevron-circle-down": "f187", "chevron-circle-left": "f186", "chevron-circle-right": "f185", "chevron-circle-up": "f184", "chevron-down": "f183", "chevron-left": "f182", "chevron-right": "f181", "chevron-up": "f180", "caret-down": "f17f", "caret-left": "f17e", "caret-right": "f17d", "caret-up": "f17c" },
103
+ "real-estate": { "acres": "f17a", "bath": "f179", "bathtub": "f178", "bed": "f177", "bed1": "f176", "bedroom": "f175", "buildings": "f174", "cabin": "f173", "door": "f172", "door-sliding": "f171", "door-swinging": "f170", "doorbell": "f16f", "fence": "f16e", "garage": "f16d", "garage-door": "f16c", "garage-open": "f16b", "gate": "f16a", "gazebo": "f169", "guest-house": "f168" },
104
+ "social-media": { "Al": "f166", "Instagram-round": "f165", "Messenger-round": "f164", "Messenger-square": "f163", "Snapchat-round": "f162", "Snapchat-square": "f161", "Telegram-round": "f160", "Telegram-square": "f15f", "Viber-round": "f15e", "Viber-square": "f15d", "Whatsapp-round": "f15c", "Whatsapp-square": "f15b", "facebook-box": "f15a", "facebook-f": "f159", "facebook": "f158", "google": "f157", "instagram": "f156", "linkedin": "f155", "pinterest-box": "f154", "pinterest-p": "f153", "pinterest": "f152", "reddit": "f151", "skype": "f150", "slack-hashtag": "f14f", "snapchat": "f14e", "spotify": "f14d", "telegram": "f14c", "twitter": "f14b", "vimeo": "f14a", "vine": "f149", "whatsapp": "f148", "youtube-play": "f147", "youtube": "f146" },
105
+ "text-editor": { "align-center": "f130", "align-justify": "f12f", "align-left": "f12e", "align-right": "f12d", "blockquote": "f12c", "bold": "f12b", "clean-format": "f12a", "code-block": "f129", "color-background": "f128", "color-text": "f127", "direction-ltr": "f126", "direction-rtl": "f125", "edit": "f124", "format-clear": "f123", "header": "f122", "header-1": "f121", "header-2": "f120", "header-3": "f11f", "header-4": "f11e", "header-5": "f11d", "header-6": "f11c", "highlight": "f11b", "indent-decrease": "f11a", "indent-increase": "f119", "italic": "f118", "link": "f117", "list-bullet": "f116", "list-ordered": "f115", "picker-arrows": "f114", "redo": "f113", "strikethrough": "f112", "subscript": "f111", "superscript": "f110", "underline": "f10f", "undo": "f10e" },
106
+ "weather": { "wi-day-cloudy": "f114", "wi-day-rain-mix": "f113", "wi-day-rain": "f112", "wi-day-sleet-storm": "f111", "wi-day-storm-showers": "f110", "wi-day-sunny": "f10f", "wi-day-thunderstorm": "f10e", "wi-dewpoint": "f10d", "wi-humidity": "f10c", "wi-night-alt-cloudy": "f10b", "wi-night-alt-rain-mix": "f10a", "wi-night-alt-thunderstorm": "f109", "wi-night-clear": "f108", "wi-night-rain": "f107", "wi-night-sleet-storm": "f106", "wi-night-storm-showers": "f105", "wi-raindrop": "f104", "wi-strong-wind": "f103", "wi-thermometer": "f102" }
107
+ };
108
+
109
+ const searchInput = document.getElementById('searchInput');
110
+ const categoryFilter = document.getElementById('categoryFilter');
111
+ const content = document.getElementById('content');
112
+ const displayCount = document.getElementById('displayCount');
113
+
114
+ // Populate category filter
115
+ Object.keys(iconData).sort().forEach(cat => {
116
+ const option = document.createElement('option');
117
+ option.value = cat;
118
+ option.textContent = cat.charAt(0).toUpperCase() + cat.slice(1);
119
+ categoryFilter.appendChild(option);
120
+ });
121
+
122
+ function renderIcons() {
123
+ const searchTerm = searchInput.value.toLowerCase();
124
+ const selectedCategory = categoryFilter.value;
125
+
126
+ content.innerHTML = '';
127
+ let displayedCount = 0;
128
+
129
+ Object.keys(iconData).sort().forEach(category => {
130
+ if (selectedCategory && selectedCategory !== category) return;
131
+
132
+ const icons = iconData[category];
133
+ const filteredIcons = Object.entries(icons).filter(([name, glyph]) => {
134
+ const className = `aga-${category}-${name}`;
135
+ return name.includes(searchTerm) || className.includes(searchTerm);
136
+ });
137
+
138
+ if (filteredIcons.length === 0) return;
139
+
140
+ const categoryDiv = document.createElement('div');
141
+ categoryDiv.className = 'category';
142
+
143
+ const header = document.createElement('div');
144
+ header.className = 'category-header';
145
+ header.textContent = `${category.charAt(0).toUpperCase() + category.slice(1)} (${filteredIcons.length})`;
146
+ categoryDiv.appendChild(header);
147
+
148
+ const grid = document.createElement('div');
149
+ grid.className = 'icon-grid';
150
+
151
+ filteredIcons.forEach(([name, glyph]) => {
152
+ const className = `aga-${category}-${name}`;
153
+ const box = document.createElement('div');
154
+ box.className = 'icon-box';
155
+
156
+ const display = document.createElement('div');
157
+ display.className = 'icon-display';
158
+ display.innerHTML = `<i style="font-family: ag-icons; font-size: 48px;">&#x${glyph};</i>`;
159
+
160
+ const nameEl = document.createElement('div');
161
+ nameEl.className = 'icon-name';
162
+ nameEl.textContent = name;
163
+
164
+ const classEl = document.createElement('div');
165
+ classEl.className = 'icon-class';
166
+ classEl.textContent = className;
167
+
168
+ box.appendChild(display);
169
+ box.appendChild(nameEl);
170
+ box.appendChild(classEl);
171
+
172
+ box.onclick = () => {
173
+ navigator.clipboard.writeText(className);
174
+ box.style.background = '#e8f5e9';
175
+ setTimeout(() => { box.style.background = '#f9f9f9'; }, 200);
176
+ };
177
+
178
+ grid.appendChild(box);
179
+ displayedCount++;
180
+ });
181
+
182
+ categoryDiv.appendChild(grid);
183
+ content.appendChild(categoryDiv);
184
+ });
185
+
186
+ displayCount.textContent = displayedCount;
187
+ }
188
+
189
+ searchInput.addEventListener('input', renderIcons);
190
+ categoryFilter.addEventListener('change', renderIcons);
191
+
192
+ renderIcons();
193
+ </script>
194
+ </body>
195
+ </html>