Configuration

Blade Ionicons works with sensible defaults out of the box, so configuration is optional. When you do want to customize it, publish the config file and edit the four options it exposes.

Publishing the config

Publish config/blade-ionicons.php:

php artisan vendor:publish --tag=blade-ionicons-config

The published file looks like this:

return [
    'prefix' => 'ionicon',
 
    'fallback' => '',
 
    'class' => '',
 
    'attributes' => [
        // 'width' => 50,
        // 'height' => 50,
    ],
];

These options are merged into the ionicons icon set that the package registers with Blade Icons, so they behave exactly like the corresponding Blade Icons set options.

prefix

The component prefix for the icon set. It defaults to ionicon, which is why every component is written as <x-ionicon-{name} /> and every directive reference is ionicon-{name}. The prefix must be unique across all the icon sets registered in your app.

'prefix' => 'ionicon',

Changing it renames how you reference every icon. For example, setting the prefix to ion:

'prefix' => 'ion',

…changes the component and directive names accordingly:

{{-- With 'prefix' => 'ion' --}}
<x-ion-heart class="w-6 h-6" />
 
@svg('ion-heart', 'w-6 h-6')

fallback

The icon rendered when a requested icon name cannot be found in this set. It is empty by default, which means a missing icon throws an exception. Set it to a valid Ionicons name (without the prefix) to render that icon instead — useful for gracefully handling dynamic icon names:

'fallback' => 'help-circle-outline',

Now a reference to an icon that does not exist falls back to help-circle-outline rather than erroring out.

class

Default CSS classes applied to every icon in the set. This is the cleanest way to set a baseline size or color without repeating it on every tag:

'class' => 'inline-block w-5 h-5',

With that in place, this component:

<x-ionicon-heart />

…renders with class="inline-block w-5 h-5" already applied. Classes you pass on an individual component are added on top of these defaults:

{{-- Effective classes: inline-block w-5 h-5 text-rose-500 --}}
<x-ionicon-heart class="text-rose-500" />

attributes

Default HTML attributes applied to every icon in the set. A common use is to set a default width and height so icons have a consistent intrinsic size:

'attributes' => [
    'width' => 24,
    'height' => 24,
],

You can set any SVG attribute here — for example, making every icon decorative by default:

'attributes' => [
    'width' => 24,
    'height' => 24,
    'aria-hidden' => 'true',
],

Attributes you pass on an individual component override these defaults for that icon.

Beyond these options

Blade Ionicons forwards its configuration to Blade Icons, so anything Blade Icons supports at the set level applies here. For the full list of set options and other Blade Icons features, see the Blade Icons documentation.