I have noticed that the current template which uses tailwind generate icon class using the background and image mask css properties.
While those works fine on display, and have the nice side effect that it applies the current color without changing the svg files to set fill to currentColor, I have one issue: printing.
I am generating reports in HTML, and when printed, no icon show up, because by default, browsers do not print backgrounds. There are some workarounds but none was acceptable.
Thus I am wondering how, in 2024, you manage icons. I must technically know about 10 solutions, icons fonts, svg use, inline svg, image maskcss, img tag with src tag… But I have not tested them all within phoenix and I am wondering if you have any insight to share about this.
I am inclined to keep the tailwind implementation that phoenix generates and add an elixir module that let me use <svg> or <img> tag, but I am wondering if I should inline the icons or if I should simply put them into static assets.
In Firefox you can print backgrounds too. There is Options section in bottom-right side of print dialog and within it there is an option to also print backgrounds (which by default is disabled). Not sure about other browsers, but I don’t see why they would not support it this or other way …
Also there is an option in Firefox print dialog to use System’s print dialog. In my case (Gentoo Linux with Plasma 6) there is an Options tab which contains 2 options to enable printing colors and images in background.
Edit: If you enter about:config in Firefox then there is an option print.printer_Mozilla_Save_to_PDF.print_bgimages. You can set it to true and it would by default print background images.
My current approach is simply to use Phoenix.Copy v0.1.4 — Documentation to copy everything to the priv/static directory and use img tag, but I cannot color the icons, but it works because those are black and white printed reports.
