Filament•3w ago

How to use custom icon

Hi i have this action on a table in livewire component and i am passing the icon and HTML string but i seem to render it as image any idea on how i can using my font awesome pro icons Livewire component

  ActionGroup::make([
  EditAction::make()
                    ->icon(new HtmlString(Blade::render('<i class="fal fa-edit"></i>')))
                    ->fillForm(fn(Organization $organization) => $organization->toArray())
                    ->form([
                        TextInput::make('name'),
                        TextInput::make('address'),
                        Textarea::make('description'),
                    ])
 ])

  ActionGroup::make([
  EditAction::make()
                    ->icon(new HtmlString(Blade::render('<i class="fal fa-edit"></i>')))
                    ->fillForm(fn(Organization $organization) => $organization->toArray())
                    ->form([
                        TextInput::make('name'),
                        TextInput::make('address'),
                        Textarea::make('description'),
                    ])
 ])

Solution:

Did you check this section? if you are using the package, I think you can use ->icon('fa-edit')...

GitHub

GitHub - owenvoke/blade-fontawesome: A package to easily make use o...

A package to easily make use of Font Awesome in your Laravel Blade views. - owenvoke/blade-fontawesome

Jump to solution

14 Replies

toeknee•3w ago

You likely need to include the .fa-edit in the tailwind whitelist. Or build a blade view which just has all the additional classes in a div so they are built on compile. it would make mre sense to keep one icon library usually though

sohailOP•3w ago

ok so i can i use font awasome pro not heroicon or blade icons can you give me a example sir i dont know how to do that

toeknee•3w ago

create: resources/extra_class.blade.php add:

<i class="fal fa-edit"></i>

<i class="fal fa-edit"></i>

run: npm run build

sohailOP•3w ago

right i did that it still not working

sohailOP•3w ago

i think the issue is it put my it tag inside and image what does it do that i dont know

toeknee•3w ago

Yeah it appears so

LeandroFerreira•3w ago

https://github.com/owenvoke/blade-fontawesome ?

GitHub

GitHub - owenvoke/blade-fontawesome: A package to easily make use o...

A package to easily make use of Font Awesome in your Laravel Blade views. - owenvoke/blade-fontawesome

sohailOP•3w ago

@LeandroFerreira Thnx Any idea why It is putting my icon inside a image tag

Solution

LeandroFerreira•3w ago

Did you check this section? if you are using the package, I think you can use ->icon('fa-edit')

GitHub

GitHub - owenvoke/blade-fontawesome: A package to easily make use o...

A package to easily make use of Font Awesome in your Laravel Blade views. - owenvoke/blade-fontawesome

sohailOP•3w ago

Yes sir I installed and it working now just was wondering why wasn't the html string working

LeandroFerreira•3w ago

hum I don't know

toeknee•3w ago

HTML string doesn’t work in there by the looks of the code since we have the icon package now

sohailOP•3w ago

ok thnx is there a way to replace default icon with my fontawsome icon it tried by it did not work

 FilamentIcon::register([
            'actions::edit-action.grouped' => 'fal-pen-to-square',
        ]);

 FilamentIcon::register([
            'actions::edit-action.grouped' => 'fal-pen-to-square',
        ]);

Gaming

Programming

How to use custom icon