Documentation

• Filament Icon Picker
  • Installation
  • Usage
    • Basic Usage
    • Options
      • Columns
      • Sets
      • Allow/Disallow icons
      • Layout
      • Custom Item Template

#Filament Icon Picker

This plugin adds a new icon picker form field and a corresponding table column. You can use it to select from any blade-icons kit that you have installed. By default, heroicons are supported since it is shipped with Filament.

This can be useful for when you want to customize icons rendered on your frontend, if you want your users to be able to customize navigation icons, add small icons to their models for easy recognition and similar.

#Installation

You can install the package via composer:

composer require guava/filament-icon-picker

You can publish the config file with:

php artisan vendor:publish --tag="filament-icon-picker-config")

This is the contents of the published config file:

 
<?php
return [
 
    'sets' => null,
 
    'columns' => 1,
 
    'layout' => \Guava\FilamentIconPicker\Layout::FLOATING,
 
];

#Usage

#Basic Usage

Usage in Admin Panel:

use Guava\FilamentIconPicker\Forms\IconPicker;
 
public static function form(Form $form): Form
{
    return $form->schema([
        IconPicker::make('icon');
    ]);
}

Usage in Livewire Component:

use Guava\FilamentIconPicker\Forms\IconPicker;
 
protected function getFormSchema(): array
{
    return [
        IconPicker::make('icon'),
    ];
}

Usage in Tables:

// Make sure this is the correct import, not the filament one
use Guava\FilamentIconPicker\Tables\IconColumn;
 
public static function table(Table $table): Table
{
    return $table
        ->columns([
            IconColumn::make('icon'),
        ])
        // ...
        ;
}

#Options

#Columns

By default, a single-column icon picker will be displayed. You can customize the amount of columns via the icon-picker.columns configuration or using the ->columns() option like this:

// Display 3 columns from lg and above
IconPicker::make('icon')
    ->columns(3);
 
// More detailed customization
// This will display 1 column from xs to md, 3 columns from lg to xl and 5 columns from 2xl and above
IconPicker::make('icon')
    ->columns([
        'default' => 1,
        'lg' => 3,
        '2xl' => 5,
    ]);

1 Column	3 Columns

#Sets

By default, the plugin will use all available blade icon sets installed. If you want to use only specific icon sets, you can change the default via the icon-picker.sets configuration or on a case-by-case basis:

// Search both herocions and fontawesome icons
IconPicker::make('icon')
    ->sets(['heroicons', 'fontawesome-solid']);

#Allow/Disallow icons

For detailed control over the icons, there are two options available to allow and disallow certain icons.

// Allow ONLY heroicon-o-user and heroicon-o-users
// Allow ALL fontawesome icons, EXCEPT fas-user
IconPicker::make('icon')
    ->allowIcons(['heroicon-o-user', 'heroicon-o-users'])
    ->disallowIcons(['fas-user']);

#Layout

The icon picker comes with two layouts. The default, Layout::FLOATING is the standard layout used in Filament Selects. The search results will appear in a pop over window.

The Layout::ON_TOP will render the search results always on the page.

//
IconPicker::make('icon')
    ->layout(Layout::FLOATING) // default
    //or
    ->layout(Layout::ON_TOP)

#Custom Item Template

Out of the box, the search results render a preview of the icon and their identifier. You are free to customize this using the ->itemTemplate() option:

// Render your.blade.template instead of the default template.
// Make sure to pass the $icon as parameter to be able to render it in your view.
IconPicker::make('icon')
    ->itemTemplate(fn($icon) => view('your.blade.template', ['icon' => $icon]));