I assume this would work for static heroicons, but if I wanted to pull the heroicon names from a database or another source, mix tailwind default will not land what I need in app.css. I.e., dynamically setting the icon is not an option. Any advice on that, please?
Unless you can pre-generate a page where all possble icons are listed, so they are included by tailwind.
I have done this when the icon was generated in Elm code and wasn’t picked up.
Thank you @Hermanverschooten yeah that’s what I also figured. Seems a little hacky but could be an acceptable solution.
some icons wont work even if the svgs exits in heroicon dep
What is generated in the page?
Hello everyone. I have a similar issue. In mix.exs I have the defaults from mix phx.new with Phoenix 1.8.1 and Phoenix LiveView 1.1.16:
{:heroicons,
github: "tailwindlabs/heroicons",
tag: "v2.2.0",
sparse: "optimized",
app: false,
compile: false,
depth: 1},
Some icons work. Others don’t. For example:
<.icon name="archive-box-arrow-down" />
…results in this:
no function clause matching in AppWeb.CoreComponents."icon (overridable 1)"/1
This works though:
<.icon name="hero-x-mark" />
Any ideas? I initially tried to make lucide_icons work on this project, to no avail. Next, I tried iconify_ex; no joy either. So, I deleted those deps and thought that heroicons would work as it always did. Nope.
D’oh – I needed to add the hero- prefix… Leaving this for other sleep-deprived folks who might be making the same dumb error. And for posterity 
2 Likes
Would be cool if the component could suggest a similar icon in the case of a typo. The standard lib actually has functions meant specifically for this.
1 Like
What I like even better than that is auto complete that VScode + Tailwind Intellisense extension can provide.
For example, for x-mark-micro I can type just hxmm and get the first result from the autocomplete!
I might experiment with your idea of improving the error message, as I too have forgotten the hero- prefix sometimes
Good thing is the relevant code is all in “user land”, part of the application generated with mix phx.new. I think the change would be replacing a pattern match with a more lenient pattern, then explicit error message when the icon doesn’t match any of the options. Getting the valid names though, well, they’re read from disk in JS in a Tailwind plugin. I guess we’d need to do the same directory reading in Elixir.
