Icon Buttons

What is the yii2 way to generate icon buttons?

I’m really missing YiiBooster / YiiStrap in 1.1 - there are a lot of nice features that yii2 either doesn’t have or I’m not sure how to implement.

There is some discussion on the github page about it but the conversation has trailed off without any plan to implement…

https://github.com/yiisoft/yii2/pull/1285

https://github.com/yiisoft/yii2/issues/5207

I see Kartik has put together a package to handle icon frameworks which looks promising:

https://github.com/kartik-v/yii2-icons

However, the implementation is a little ugly. Here is sample code:


$items = [

    ['label' => Icon::show('home') . 'Home', 'url' => ['/site/index']],

];

I don’t like this because we are manually concatenating strings to create the label. The way YiiBooster/YiiStrap did this was as a ‘icon’ property which made for much cleaner code.

So besides just venting a little I’m wondering what others are doing.

I understand where you are coming from.

But not sure if its the yii2 framework which should take such a requirement which probably will be different for each developer (will leave it for the yii team to decide - as they are the best people to answer this).

Even if its bootstrap specific - people tend to use different icon frameworks - for example there would be quite a few not using the inbuilt glyphicons and rather use in their production systems – frameworks like font awesome or even fontello.

I built yii2-icons to address a different need though. Offer one place to simultaneously manage icon frameworks - register automatically assets and render icons using a simple Helper.

Coming back, configuring a icon name probably can be an optional addon to each extension that loops through labels and icons. For example, in some of my other specific extensions the icon is indeed a configurable option (e.g. the export menu in yii2-grid).

You may try using a simple helper for your case like below;




function iconize(icon, label) {

   return Icon::show(icon) . ' ' . label; // or directly render the markup  

}

// then use it like below

$items = [

    ['label' => iconize('home', 'Home'), 'url' => ['/site/index']],

    ['label' => iconize('user', 'Account'), 'url' => ['/site/profile']],

    ['label' => iconize('phone', 'Contact'), 'url' => ['/site/contact']],

];