packages/tables/docs/02-columns/03-icon.md
import AutoScreenshot from "@components/AutoScreenshot.astro" import Aside from "@components/Aside.astro" import UtilityInjection from "@components/UtilityInjection.astro"
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,
})
<UtilityInjection set="tableColumns" version="5.x">The icon() method can inject various utilities into the function as parameters.</UtilityInjection>
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',
})
<UtilityInjection set="tableColumns" version="5.x">The color() method can inject various utilities into the function as parameters.</UtilityInjection>
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)
<UtilityInjection set="tableColumns" version="5.x">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.</UtilityInjection>
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()
<AutoScreenshot name="tables/columns/icon/boolean" alt="Icon column to display a boolean" version="5.x" />If this attribute in the model class is already cast as a
boolorboolean, Filament is able to detect this, and you do not need to useboolean()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())
<UtilityInjection set="tableColumns" version="5.x">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.</UtilityInjection>
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)
<UtilityInjection set="tableColumns" version="5.x">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.</UtilityInjection>
You may customize the icon color representing each state:
use Filament\Tables\Columns\IconColumn;
IconColumn::make('is_featured')
->boolean()
->trueColor('info')
->falseColor('warning')
<UtilityInjection set="tableColumns" version="5.x">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.</UtilityInjection>
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()