Change widget icon color

Is it possible to change the color on the widget icons ?

Solution:

You can add an extra attribute (class or id) to your stat widget and then use the child combinator ( > ), for instance: ```php ... ... ->extraAttributes([...

Jump to solution

5 Replies

ChesterSOP•2mo ago

->color('danger')

->color('danger')

doesn't do anything 🤔 Here is the code fwiw

Stat::make(__('Resolved'), $resolved)
    ->extraAttributes(['class' => 'text-green-400 green-400 foobar']) // trying stuff here
    ->color('success')
    ->icon('heroicon-o-check-badge'),
Stat::make(__('Unresolved'), $unresolved)
    ->icon('heroicon-o-exclamation-triangle'),

Stat::make(__('Resolved'), $resolved)
    ->extraAttributes(['class' => 'text-green-400 green-400 foobar']) // trying stuff here
    ->color('success')
    ->icon('heroicon-o-check-badge'),
Stat::make(__('Unresolved'), $unresolved)
    ->icon('heroicon-o-exclamation-triangle'),

Prymiee•2mo ago

the underlying Blade component (vendor/filament/widgets/resources/views/stats-overview-widget/stat.blade.php:~45) has:

                <x-filament::icon
                    :icon="$icon"
                    class="fi-wi-stats-overview-stat-icon h-5 w-5 text-gray-400 dark:text-gray-500"
                />

                <x-filament::icon
                    :icon="$icon"
                    class="fi-wi-stats-overview-stat-icon h-5 w-5 text-gray-400 dark:text-gray-500"
                />

So the SVG has those colors more specifically set on it. Not a lovely solution but it can be done: https://filamentphp.com/docs/3.x/support/style-customization#applying-styles-to-hook-classes specifically:

.fi-wi-stats-overview-stat-icon {
    @apply text-green-400 !important;
}

.fi-wi-stats-overview-stat-icon {
    @apply text-green-400 !important;
}

BUT!! This is global :// so maybe worth a PR 🙂

Solution

Miguel García•2mo ago

You can add an extra attribute (class or id) to your stat widget and then use the child combinator ( > ), for instance:

...
...
->extraAttributes([
    'id' => 'your-stat-widget-id',
    'class' => 'your-stat-widget-class'
])
...
...

...
...
->extraAttributes([
    'id' => 'your-stat-widget-id',
    'class' => 'your-stat-widget-class'
])
...
...

...
...
div#your-stat-widget-id > div > div > svg.fi-wi-stats-overview-stat-icon {
    color:blue !important;
}

div.your-stat-widget-class > div > div > span.fi-wi-stats-overview-stat-label {
    color:red !important;
}
...
...

...
...
div#your-stat-widget-id > div > div > svg.fi-wi-stats-overview-stat-icon {
    color:blue !important;
}

div.your-stat-widget-class > div > div > span.fi-wi-stats-overview-stat-label {
    color:red !important;
}
...
...

Miguel García•2mo ago

ChesterSOP•2mo ago

I was hoping for something like ->iconColor(...) but I guess not 😂 Thank you all for your time 🙇‍♂️

Gaming

Programming

Change widget icon color