tabler_icon function - $default use case ?

[cavasinf]

Hey @kevinpapst,

wondering what is the purpose of $default in the tabler_icon TWIG function.

TablerBundle/src/Twig/RuntimeExtension.php

Lines 131 to 134 in 8a70eaa

	public function icon(string $name, string $default = null, bool $isIcon = true): string
	{
	return ($isIcon ? 'icon ' : '') . ($this->icons[str_replace('-', '_', $name)] ?? ($default ?? $name));
	}

Due to that,
all of my calls of this function (when not using buttons), are made with null for that parameter.

{{ tabler_icon('email', null, false) }}

Two questions arise from this:

1. Should we use false to remove .icon class.
2. Should we override .icon css when using it outside of .btn.

My current problem is that the render with icon class and font-awesome is kinda ugly:

• Too big
• Not vertically centered
• Overlap with label when large icon (e.g : fas fa-cogs)

Today .icon class: 🥉

.icon class overridden: 🥈

Without .icon class: 🥇

WDYT ?

[kevinpapst]

I have no such example in my app.
Icons are exclusively for menus, buttons and expect from that just a handful of places where it really brings a benefit.
Not judging, but why do you have an icon there? Does it help understanding the card/form?

Anyways: the default value is probably not necessary in 99% of all calls. I think it was mainly introduced for the menu, where you can add fontawesome classes directly (fas fa-cogs instead of settings). So If you don't have a mapping in tabler.yaml it will still show a menu icon.
I needed that for my app, because plugins ship their own menu items and cannot rely on an icon mapping, but I cannot think of any other place where this is used.

To answer your question: IMO the order of the parameters is wrong, because you want to toggle the $isIcon without the need to define the default. And I could use that as well.
Then we can use {{ tabler_icon('email', false) }} or <i class="{{ 'email'|icon(false) }} text-green"></i>.

Do you want to PR that change?

[cavasinf]

but why do you have an icon there? Does it help understanding the card/form?

Yes it does,
here is my full page:

For those card titles I've removed .icon class.

---

IMO the order of the parameters is wrong

Agree

---

Do you want to PR that change?

I can, but if you can too, go ahead 😃

[cavasinf]

TBH, .icon class only works for button if you are using FontAwesome.

Even for my menu, I've removed the .icon class.
As I've mentioned above,

render with icon class and font-awesome is kinda ugly:

• Too big
• Not vertically centered
• Overlap with label when large icon (e.g : fas fa-cogs)

Example menu WITH and WITHOUT .icon class:

• With / Without
  

[kevinpapst]

Yes, in the menu there is no icon class. But in some other places, this here for example looks good.
For demonstration I removed the .icon on the left side. The <i> is inside a <a class="card-btn" ...>.
This looks correct to me in both versions (but I know that it can look crappy in other places):

If we change the argument order, we should rename $isIcon to $isButton to make the purpose clearer.
Not sure about your app, but mine has probably 50 places where the icon function is used and less than 10 are outside of a button.
So having the icon class by default made sense to me.