Support custom icons for Resources

[danilopolani]

It would be nice to have the ability to add custom icons for resources. I don't have a clear idea about what's the better option, but I can think about these ways:

1. Allow a custom path to a SVG, like resource_path('svg/icon.svg'), grab its content and display it;
2. Allow an SVG url (pretty "meh", hard to customize the appearance of an SVG inside an "img src");
3. Allow inline SVG inside the $icon variable;
4. Because Filament already uses blade-icons/heroicons, we could add the support of the generic blade-icons package too that allows us to add svg files to resources/svg - or, better, create an ad-hoc folder like resources/filament/svg and read icons from that;

About point 4, I already use blade-icons in my project and I think configurations (Filament one and mine) will conflict, so it's kinda tricky there.

[ryangjchandler]

@danilopolani The $icon property on a resource is just the string for a component, so you could wrap your SVG in a custom Blade component and set the property to the name of the component.

E.g. create a file in resources/views/components/post-icon and then change $icon to $icon = 'post-icon'.

[ryangjchandler]

@danilopolani Would you be able to mark my reply as the answer too, just so other people can find this discussion easily and get the same help? Thanks!

[ryangjchandler]

It's also worth noting that the component will receive $attributes with some default classes: flex-shrink-0 w-5 h-5 so be sure to add {{ $attributes }} onto your SVG's root element.

[danharrin]

It's actually already in the docs - https://filamentadmin.com/docs/navigation/

[danilopolani]

Oh... My bad, I totally missed that. Sorry for the time wasted 😞

[danharrin]

Oh... My bad, I totally missed that. Sorry for the time wasted 😞

All good! 😄