Icon column

import AutoScreenshot from "@components/AutoScreenshot.astro" import Aside from "@components/Aside.astro" import UtilityInjection from "@components/UtilityInjection.astro"

Introduction#

Icon columns render an icon representing the state of the column:

use Filament\Tables\Columns\IconColumn;
use Filament\Support\Icons\Heroicon;

IconColumn::make('status')
    ->icon(fn (string $state): Heroicon => match ($state) {
        'draft' => Heroicon::OutlinedPencil,
        'reviewing' => Heroicon::OutlinedClock,
        'published' => Heroicon::OutlinedCheckCircle,
    })

The icon() method can inject various utilities into the function as parameters.

Customizing the color#

You may change the color of the icon, using the color() method:

use Filament\Tables\Columns\IconColumn;

IconColumn::make('status')
    ->color('success')

By passing a function to color(), you can customize the color based on the state of the column:

use Filament\Tables\Columns\IconColumn;

IconColumn::make('status')
    ->color(fn (string $state): string => match ($state) {
        'draft' => 'info',
        'reviewing' => 'warning',
        'published' => 'success',
        default => 'gray',
    })

The color() method can inject various utilities into the function as parameters.

Customizing the size#

The default icon size is IconSize::Large, but you may customize the size to be either IconSize::ExtraSmall, IconSize::Small, IconSize::Medium, IconSize::ExtraLarge or IconSize::TwoExtraLarge:

use Filament\Tables\Columns\IconColumn;
use Filament\Support\Enums\IconSize;

IconColumn::make('status')
    ->size(IconSize::Medium)

As well as allowing a static value, the size() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.

Handling booleans#

Icon columns can display a check or "X" icon based on the state of the column, either true or false, using the boolean() method:

use Filament\Tables\Columns\IconColumn;

IconColumn::make('is_featured')
    ->boolean()

If this attribute in the model class is already cast as a bool or boolean, Filament is able to detect this, and you do not need to use boolean() manually.

Optionally, you may pass a boolean value to control if the icon should be boolean or not:

use Filament\Tables\Columns\IconColumn;

IconColumn::make('is_featured')
    ->boolean(FeatureFlag::active())

As well as allowing a static value, the boolean() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.

Customizing the boolean icons#

You may customize the icon representing each state:

use Filament\Tables\Columns\IconColumn;
use Filament\Support\Icons\Heroicon;

IconColumn::make('is_featured')
    ->boolean()
    ->trueIcon(Heroicon::OutlinedCheckBadge)
    ->falseIcon(Heroicon::OutlinedXMark)

As well as allowing static values, the trueIcon() and falseIcon() methods also accept functions to dynamically calculate them. You can inject various utilities into the functions as parameters.

Customizing the boolean colors#

You may customize the icon color representing each state:

use Filament\Tables\Columns\IconColumn;

IconColumn::make('is_featured')
    ->boolean()
    ->trueColor('info')
    ->falseColor('warning')

As well as allowing static values, the trueColor() and falseColor() methods also accept functions to dynamically calculate them. You can inject various utilities into the functions as parameters.

Wrapping multiple icons#

When displaying multiple icons, they can be set to wrap if they can't fit on one line, using wrap():

use Filament\Tables\Columns\IconColumn;

IconColumn::make('icon')
    ->wrap()