Добавление иконки в список Select2

In Yii2, you can use the Select2 widget to create a dropdown with icons or other custom content. To achieve this, you can customize the `template` option of Select2 to include icons alongside the text.

Here’s an example of how to use Select2 with icons in Yii2:

### Step 1: Install Select2 Widget

If you haven't already installed the Select2 widget, you can install it via Composer:

```bash

composer require kartik-v/yii2-widget-select2 "@dev"

```

### Step 2: Use Select2 with Icons

You can customize the `template` option to include icons. Below is an example of how to do this:

```php

use kartik\select2\Select2;

use yii\helpers\Html;

// Sample data with icons

$data = [

'fa fa-home' => 'Home',

'fa fa-user' => 'User',

'fa fa-envelope' => 'Email',

];

echo Select2::widget([

'name' => 'icon-select',

'data' => $data,

'options' => ['placeholder' => 'Select an icon...'],

'pluginOptions' => [

'templateResult' => new \yii\web\JsExpression('function(icon) {

if (!icon.id) { return icon.text; }

return $(" " + icon.text + "");

}'),

'templateSelection' => new \yii\web\JsExpression('function(icon) {

if (!icon.id) { return icon.text; }

return $(" " + icon.text + "");

}'),

]);

```

### Explanation:

1. **`templateResult`**: This option defines how the dropdown items are rendered. Here, we use a JavaScript function to wrap the icon class and text in a ``.

2. **`templateSelection`**: This option defines how the selected item is displayed in the input box. It uses the same logic as `templateResult`.

### Step 3: Include Font Awesome (or any other icon library)

Make sure you include the icon library (e.g., Font Awesome) in your view or layout file:

```php

$this->registerCssFile('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

```

### Step 4: Customize Further

You can further customize the appearance and behavior of Select2 by exploring its [documentation](https://github.com/kartik-v/yii2-widget-select2).

### Output

This will render a Select2 dropdown where each option has an icon next to the text, like this:

Источник: Перейти