Tengo una lista de datos limitada (solo se muestran los 5 principales). Me vería así:

Y el problema es cómo hacer que el ícono tenga un color diferente usando la clase Bootstrap. Quiero que el ícono en esa lista tenga 5 colores como bg-light-primary para el primero, bg-light-danger para el segundo, bg-light-success para el tercero, etc. La forma en que muestro los datos es usando Laravel @ para cada. Como esto:

 @foreach ($diklats->where('status', 'Active')->take(5) as $diklat_list) <div class="transaction-item"> <a href="javascript:void(0)" class="text-dark"> <div class="media"> <div class="avatar bg-light-primary rounded"> <div class="avatar-content"> <i data-feather="book" class="avatar-icon font-medium-3"></i> </div> </div> <div class="media-body ml-1"> <h6 class="transaction-title">{{$diklat_list->name}}</h6> <small>{{$diklat_list->userDiklat->where('is_approve',1)->count()}} </small> </div> </div> </a> <div class="font-weight-bolder text-danger"></div> </div> @endforeach

En este está el controlador:

 <?php namespace App\Http\Controllers\Admin; use App\Http\Controllers\Controller; use Illuminate\Http\Request; use App\Models\{Diklat, User, UserDiklat, Regency}; use Illuminate\Support\Facades\DB; class DashboardController extends Controller { public function index() { $diklat = Diklat::where('status', 'Active')->count(); $participant = User::where('is_participant', 1)->count(); $regency = Regency::all()->count(); $diklats = Diklat::with('userDiklat')->get(); return view('admin.index', compact('diklats', 'diklat', 'participant', 'regency')); } }

He buscado este caso pero aún no lo conseguí y estoy en etapa de aprendizaje. ¿Podrias ayudarme por favor? Gracias de antemano.