style Icon Picker Component
A powerful, reusable icon picker component that supports both Bootstrap Icons and Material Symbols Rounded. Perfect for forms, settings panels, and any interface where users need to select icons.
Key Features:
- check_circle Dual Icon Support: Bootstrap Icons & Material Symbols Rounded
- check_circle Live Search: Instant filtering as you type
- check_circle Family Toggle: Easy switching between icon families
- check_circle Modal Interface: Clean, focused selection experience
- check_circle Easy Integration: Simple Blade component
Icon Libraries Included:
- Bootstrap Icons v1.11.3 - 500+ icons
- widgets Material Symbols Rounded - 200+ common icons
code Basic Usage
Live Example
Blade Component Code
<!-- Basic usage -->
<x-icon-picker
inputId="my-icon"
name="icon" />
<!-- With default value -->
<x-icon-picker
inputId="my-icon"
name="icon"
value='<i class="bi bi-house"></i>' />
<!-- Required field -->
<x-icon-picker
inputId="my-icon"
name="icon"
:required="true" />settings Advanced Examples
With Label & Helper Text
Multiple Icon Pickers
Complete Form Example
description Component Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
inputId |
String | 'icon-picker-input' |
Yes | Unique ID for the hidden input and modal. Must be unique per page. |
name |
String | 'icon' |
No | Name attribute for the form input |
value |
String | '' |
No | Pre-selected icon HTML (e.g., <i class="bi bi-house"></i>)
|
required |
Boolean | false |
No | Whether the field is required for form validation |
apps Supported Icon Libraries
Bootstrap Icons
Free, high quality, open source icon library with 500+ icons.
- Version: 1.11.3
- Format: SVG icons as web fonts
- Class:
bi bi-{icon-name}
widgets Material Symbols Rounded
Google's Material Design icon system with 200+ curated common icons.
- Source: Google Fonts
- Format: Variable web font
- Class:
material-symbols-rounded
touch_app Interactive Demo
Try It Out
Preview & Code Output
Preview
Generated HTML
<!-- Select an icon -->build Installation & Setup
Component Files
| File | Location | Purpose |
|---|---|---|
icon-picker.blade.php |
resources/views/components/ |
Blade component template |
icon-picker.js |
resources/js/ |
JavaScript functionality |
admin-static.js |
resources/js/ |
Imports icon-picker.js |
Already Included
The icon picker is already integrated into your WaveDash installation and ready to use! Simply use the Blade component in your views:
<x-icon-picker inputId="unique-id" name="field_name" />integration_instructions Using with Laravel Forms
Controller Example
// In your controller
public function store(Request $request)
{
$validated = $request->validate([
'name' => 'required|string|max:255',
'icon' => 'required|string', // This will contain the icon HTML
'url' => 'required|url',
]);
// The icon field will contain something like:
// '<i class="bi bi-house"></i>' or
// '<i class="material-symbols-rounded">home</i>'
MenuItem::create($validated);
return redirect()->back()->with('success', 'Menu item created!');
}Blade View Example
Displaying Saved Icons
auto_awesome Features & Behavior
search Live Search
Type to instantly filter icons by name. Search is case-insensitive and matches partial names.
swap_horiz Family Switching
Toggle between Bootstrap Icons and Material Symbols with the dropdown selector. Search results update automatically.
touch_app Click Selection
Click any icon to select it. Selected icon is highlighted and "Select Icon" button becomes enabled.
visibility Visual Feedback
Selected icon displays in the input field with its name. Clear button appears when an icon is selected.
refresh State Persistence
Modal remembers your last search and family selection while open. Resets when closed.
check_circle Form Integration
Works seamlessly with Laravel forms. The hidden input stores the complete icon HTML for easy database storage.
lightbulb Customization Tips
Adding More Icons
Edit resources/js/icon-picker.js and add icons to the
this.icons.material or this.icons.bootstrap arrays.
Changing Icon Size in Picker
Edit the <style> section in
icon-picker.blade.php. Change font-size: 24px; in
.icon-item i.
Styling the Input
The trigger button uses Bootstrap's btn-secondary class. You
can wrap it with custom CSS or modify the component.
Adding New Icon Families
Add a new option to the family selector, add the icon list to
this.icons, and update the getIconHtml() method.
{!! $variable !!}
without additional processing.
verified Best Practices
Always provide a unique inputId for each icon picker on
the same page to avoid conflicts.
Store the icon HTML in your database as TEXT or VARCHAR(255) for maximum flexibility.
Use {!! $icon !!}
(not {{ $icon }}
) to
render the HTML without escaping.
Add validation to ensure the icon field contains valid HTML and prevent XSS attacks.
If you're searching by icons, consider adding an index to the icon column for better performance.
When creating forms, consider providing sensible default icons for better UX.
lightbulb Real-World Use Cases
Menu Builders
Let users select icons for custom navigation menus
Widget Configuration
Allow dashboard widget customization with icon selection
Category Management
Assign visual icons to product or content categories
Quick Links
Create customizable quick link widgets (see App Widgets page)
User Badges
Let admins create custom badges with icons and colors
CMS Blocks
Add icon selection to content blocks in your CMS