Filament•2mo ago

Icon on blade not showing

<div class="absolute -left-8 flex items-center justify-center w-8 h-8 rounded-full {{ $approval['status_color'] }} ring-4 ring-white dark:ring-gray-900">
                        @switch($approval['status_icon'])
                            @case('check')
                                <x-heroicon-s-check class="w-4 h-4 text-white" />
                            @break

                            @case('x-mark')
                                <x-heroicon-s-x-mark class="w-4 h-4 text-white" />
                            @break

                            @case('clock')
                                <x-heroicon-s-clock class="w-4 h-4 text-white" />
                            @break

                            @default
                                <x-heroicon-s-information-circle class="w-4 h-4 text-white" />
                        @endswitch
                    </div>

<div class="absolute -left-8 flex items-center justify-center w-8 h-8 rounded-full {{ $approval['status_color'] }} ring-4 ring-white dark:ring-gray-900">
                        @switch($approval['status_icon'])
                            @case('check')
                                <x-heroicon-s-check class="w-4 h-4 text-white" />
                            @break

                            @case('x-mark')
                                <x-heroicon-s-x-mark class="w-4 h-4 text-white" />
                            @break

                            @case('clock')
                                <x-heroicon-s-clock class="w-4 h-4 text-white" />
                            @break

                            @default
                                <x-heroicon-s-information-circle class="w-4 h-4 text-white" />
                        @endswitch
                    </div>

I am wondering how should we implement the Icon in blade file on Filament v4 . cant seems to make it working. I have run npm run build and even installed the custom theme. Really need some guidance. Thank you 😄

Solution:

@Rolland https://github.com/filamentphp/filament/issues/18153#issuecomment-3392914384

GitHub

Icon on custom component not rendering · Issue #18153 · filamentp...

Package filament/filament Package Version v4.1.6 Laravel Version v12.33.0 Livewire Version v3.6.4 PHP Version 8.4.13 Problem description The custom component is not rendering the heroicon icon Expe...

Jump to solution

24 Replies

RollandOP•2mo ago

there should be an Icon in the middle of the coloured circle

Dennis Koch•2mo ago

Can you check the icon via DevTools? I guess something didn't work with the theme.

RollandOP•2mo ago

its just does not displays the icon

RollandOP•2mo ago

im on a fresh filament v4 btw. 😢

dannyduberstein•2mo ago

Could you check if any heroIcons work? Or you could try perhaps php artisan icons:clear or php artisan view:clear

RollandOP•2mo ago

i did tried a few of the icons but it does not work. i am wondering if anyone has the same case as me.

Dennis Koch•2mo ago

Can you check whether your switch works? Maybe add a some text before the icon.

RollandOP•2mo ago

i have make a simple action with modal popup. still not displaying any icons.

<?php

namespace App\Filament\Resources\Procurement\Requests\Tables\RecordActions;

use Filament\Actions\Action;
use Filament\Infolists\Components\TextEntry;
use Filament\Support\Enums\Width;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\HtmlString;

class TestIconAction extends Action
{
    public static function getDefaultName(): ?string
    {
        return 'test_icon_action';
    }

    protected function setUp(): void
    {
        parent::setUp();

        $this->label('Test Icons');
        $this->icon('heroicon-o-beaker');
        $this->color('warning');
        $this->tooltip('Test icon rendering');
        $this->modalWidth(Width::Large);

        $this->schema([
            TextEntry::make('icon_test')
                ->label('')
                ->hiddenLabel()
                ->html()
                ->state(fn (?Model $record) => new HtmlString(
                    view('filament.components.test-icons')->render()
                )),
        ]);

        $this->modalSubmitAction(false);
        $this->modalCancelActionLabel('Close');
        $this->modalHeading('Icon Test');
    }
}

<?php

namespace App\Filament\Resources\Procurement\Requests\Tables\RecordActions;

use Filament\Actions\Action;
use Filament\Infolists\Components\TextEntry;
use Filament\Support\Enums\Width;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\HtmlString;

class TestIconAction extends Action
{
    public static function getDefaultName(): ?string
    {
        return 'test_icon_action';
    }

    protected function setUp(): void
    {
        parent::setUp();

        $this->label('Test Icons');
        $this->icon('heroicon-o-beaker');
        $this->color('warning');
        $this->tooltip('Test icon rendering');
        $this->modalWidth(Width::Large);

        $this->schema([
            TextEntry::make('icon_test')
                ->label('')
                ->hiddenLabel()
                ->html()
                ->state(fn (?Model $record) => new HtmlString(
                    view('filament.components.test-icons')->render()
                )),
        ]);

        $this->modalSubmitAction(false);
        $this->modalCancelActionLabel('Close');
        $this->modalHeading('Icon Test');
    }
}

<div class="p-6 space-y-6">
    <div class="text-center mb-8">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Icon Test</h2>
        <p class="text-sm text-gray-600 dark:text-gray-400">Testing various Heroicons rendering</p>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
        {{-- Test Icon 1 --}}
        <div class="flex flex-col items-center gap-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
            <div class="w-12 h-12 bg-primary-500/10 dark:bg-primary-500/20 rounded-full flex items-center justify-center">
                <x-heroicon-o-check-circle class="w-8 h-8 text-primary-600 dark:text-primary-400" />
            </div>
            <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Check Circle</span>
        </div>

        {{-- Test Icon 2 --}}
        <div class="flex flex-col items-center gap-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
            <div class="w-12 h-12 bg-success-500/10 dark:bg-success-500/20 rounded-full flex items-center justify-center">
                <x-heroicon-o-cube class="w-8 h-8 text-success-600 dark:text-success-400" />
            </div>
            <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Cube</span>
        </div>

        {{-- Test Icon 3 --}}

...

<div class="p-6 space-y-6">
    <div class="text-center mb-8">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Icon Test</h2>
        <p class="text-sm text-gray-600 dark:text-gray-400">Testing various Heroicons rendering</p>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
        {{-- Test Icon 1 --}}
        <div class="flex flex-col items-center gap-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
            <div class="w-12 h-12 bg-primary-500/10 dark:bg-primary-500/20 rounded-full flex items-center justify-center">
                <x-heroicon-o-check-circle class="w-8 h-8 text-primary-600 dark:text-primary-400" />
            </div>
            <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Check Circle</span>
        </div>

        {{-- Test Icon 2 --}}
        <div class="flex flex-col items-center gap-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
            <div class="w-12 h-12 bg-success-500/10 dark:bg-success-500/20 rounded-full flex items-center justify-center">
                <x-heroicon-o-cube class="w-8 h-8 text-success-600 dark:text-success-400" />
            </div>
            <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Cube</span>
        </div>

        {{-- Test Icon 3 --}}

...

RollandOP•2mo ago

Dennis Koch•2mo ago

Can you try whether it works with @svg('heroicon-s-clock', ['class' => 'w-8 h-8']). And please check the HTML not only visual.

RollandOP•2mo ago

Do you mean to see this?

Dennis Koch•2mo ago

That's with @svg() directive?

RollandOP•2mo ago

nope, give me a moment. will show with @ svg()

RollandOP•2mo ago

with @ svg() directive

RollandOP•2mo ago

<div class="p-6 space-y-6">
    <div class="text-center mb-8">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Icon Test</h2>
        <p class="text-sm text-gray-600 dark:text-gray-400">Testing various Heroicons rendering</p>
    </div>

    {{-- Testing @svg directive --}}
    <div class="mt-8 border-t border-gray-200 dark:border-gray-700 pt-8">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">@ svg Directive Test</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            {{-- Test @svg with solid variant --}}
            <div class="flex flex-col items-center gap-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                <div class="w-12 h-12 bg-purple-500/10 dark:bg-purple-500/20 rounded-full flex items-center justify-center">
                    @svg('heroicon-s-clock', ['class' => 'w-8 h-8 text-purple-600 dark:text-purple-400'])
                </div>
                <span class="text-xs font-medium text-gray-700 dark:text-gray-300">@ svg solid</span>
            </div>

            {{-- Test @svg with outline variant --}}
            <div class="flex flex-col items-center gap-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                <div class="w-12 h-12 bg-blue-500/10 dark:bg-blue-500/20 rounded-full flex items-center justify-center">
                    @svg('heroicon-o-heart', ['class' => 'w-8 h-8 text-blue-600 dark:text-blue-400'])
                </div>
                <span class="text-xs font-medium text-gray-700 dark:text-gray-300">@ svg outline</span>
            </div>

<div class="p-6 space-y-6">
    <div class="text-center mb-8">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Icon Test</h2>
        <p class="text-sm text-gray-600 dark:text-gray-400">Testing various Heroicons rendering</p>
    </div>

    {{-- Testing @svg directive --}}
    <div class="mt-8 border-t border-gray-200 dark:border-gray-700 pt-8">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">@ svg Directive Test</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            {{-- Test @svg with solid variant --}}
            <div class="flex flex-col items-center gap-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                <div class="w-12 h-12 bg-purple-500/10 dark:bg-purple-500/20 rounded-full flex items-center justify-center">
                    @svg('heroicon-s-clock', ['class' => 'w-8 h-8 text-purple-600 dark:text-purple-400'])
                </div>
                <span class="text-xs font-medium text-gray-700 dark:text-gray-300">@ svg solid</span>
            </div>

            {{-- Test @svg with outline variant --}}
            <div class="flex flex-col items-center gap-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                <div class="w-12 h-12 bg-blue-500/10 dark:bg-blue-500/20 rounded-full flex items-center justify-center">
                    @svg('heroicon-o-heart', ['class' => 'w-8 h-8 text-blue-600 dark:text-blue-400'])
                </div>
                <span class="text-xs font-medium text-gray-700 dark:text-gray-300">@ svg outline</span>
            </div>

the one with @ svg()

Dennis Koch•2mo ago

That's really weird. Maybe try removing vendor folder and reinstall it

Bruno Pereira•2mo ago

in v4 to render icons I use <x-filament::icon icon="heroicon-s-clock" /> the blade component is not mentioned in the docs but it's still present in the project

RollandOP•2mo ago

i have tried this. and it still not displaying any icons. i tried on a new laravel project. still have the same behaviour. no icon. filament v4.1.6

Dennis Koch•2mo ago

Those icons are not part of Filament. Does it work outside of Filament?

RollandOP•2mo ago

really? can you link the icons that is part of Filament? Have not tried that. i tried this:

@php
    use Filament\Support\Icons\Heroicon;
@endphp

<div class="p-6 space-y-6">
    <div class="text-center mb-8">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Icon Test</h2>
        <p class="text-sm text-gray-600 dark:text-gray-400">Testing various Heroicons rendering</p>
    </div>

    {{-- Testing Filament Icon Component --}}
    <div class="mt-8 border-t border-gray-200 dark:border-gray-700 pt-8">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Filament Icon Component Test</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            {{-- Test x-filament::icon with solid variant --}}
            <div class="flex flex-col items-center gap-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                <div
                    class="w-12 h-12 bg-purple-500/10 dark:bg-purple-500/20 rounded-full flex items-center justify-center">
                    {{-- <x-filament::icon icon="heroicon-s-clock" class="w-8 h-8 text-purple-600 dark:text-purple-400" /> --}}

                    // filament v4 syntax
                    <x-filament::badge :icon="Heroicon::Star">
                        Star
                    </x-filament::badge> 


                </div>
                <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Filament solid</span>
            </div>

@php
    use Filament\Support\Icons\Heroicon;
@endphp

<div class="p-6 space-y-6">
    <div class="text-center mb-8">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Icon Test</h2>
        <p class="text-sm text-gray-600 dark:text-gray-400">Testing various Heroicons rendering</p>
    </div>

    {{-- Testing Filament Icon Component --}}
    <div class="mt-8 border-t border-gray-200 dark:border-gray-700 pt-8">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Filament Icon Component Test</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            {{-- Test x-filament::icon with solid variant --}}
            <div class="flex flex-col items-center gap-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                <div
                    class="w-12 h-12 bg-purple-500/10 dark:bg-purple-500/20 rounded-full flex items-center justify-center">
                    {{-- <x-filament::icon icon="heroicon-s-clock" class="w-8 h-8 text-purple-600 dark:text-purple-400" /> --}}

                    // filament v4 syntax
                    <x-filament::badge :icon="Heroicon::Star">
                        Star
                    </x-filament::badge> 


                </div>
                <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Filament solid</span>
            </div>

RollandOP•2mo ago

@php
    use Filament\Support\Icons\Heroicon;
@endphp

<x-filament::badge :icon="Heroicon::Star">
    Star
</x-filament::badge>

@php
    use Filament\Support\Icons\Heroicon;
@endphp

<x-filament::badge :icon="Heroicon::Star">
    Star
</x-filament::badge>

this also not working on the blade file. im wondering if there are any alternative to this. would love to know if there is any solutions for this 😄

Bruno Pereira•2mo ago

have you tried to clear caches, compile assets? did you override any views? Because I just popped one of these

<x-filament::icon :icon="Heroicon::Star">
    Star
</x-filament::icon>

<x-filament::icon :icon="Heroicon::Star">
    Star
</x-filament::icon>

in my project using the latest version of filamentphp and it just worked

Solution

PeopleSea•2mo ago

@Rolland https://github.com/filamentphp/filament/issues/18153#issuecomment-3392914384

GitHub

Icon on custom component not rendering · Issue #18153 · filamentp...

Gaming

Programming

Icon on blade not showing

Did you find this page helpful?