Getting Started

Minimal Setup

Installation

composer require codeat3/blade-google-material-design-icons

Add the service provider to config/app.php (if not auto-discovered):

'providers' => [
    // ...
    Codeat3\BladeGoogleMaterialDesignIcons\BladeGoogleMaterialDesignIconsServiceProvider::class,
],

Publish Config (Optional)
```
php artisan vendor:publish --provider="Codeat3\BladeGoogleMaterialDesignIcons\BladeGoogleMaterialDesignIconsServiceProvider"
```
Edit config/blade-google-material-design-icons.php to customize:
- Icon set (default: material-icons)
- CDN URL
- Default size/color
First Usage In any Blade view:
```
@materialIcon('home')
```
Renders: <i class="material-icons">home</i>

Laravel 13+ Compatibility

This release ensures full compatibility with Laravel 13. No additional configuration is required for Laravel 13 projects. The package now leverages Laravel 13's auto-discovery features by default, eliminating the need to manually register the service provider in config/app.php for new Laravel 13 installations.

Implementation Patterns

1. Dynamic Icon Rendering

Use variables for dynamic icons:

@materialIcon($iconName, ['class' => 'text-blue-500'])

Example: Fetch icon name from DB/model:

$icon = $task->icon ?? 'check';

@materialIcon($icon, ['size' => 'large'])

2. Component Integration

Wrap in reusable components (e.g., resources/views/components/icon.blade.php):

@props(['name', 'size' => 'default'])

<i class="material-icons {{ $size }}">{{ $name }}</i>

Usage:

<x-icon name="favorite" size="large" />

3. Custom Icon Sets

Extend beyond material-icons:

Update config:

'icon_sets' => [
    'material-symbols' => 'https://fonts.googleapis.com/icon?family=Material+Symbols',
],

Use in Blade:

@materialIcon('home', [], 'material-symbols')

4. Inline Styles & Attributes

Pass HTML attributes directly:

@materialIcon('search', [
    'aria-label' => 'Search',
    'style' => 'color: #666; font-size: 24px;'
])

5. Conditional Icons

Combine with Blade conditionals:

@if($user->isAdmin)
    @materialIcon('admin_panel_settings')
@else
    @materialIcon('dashboard')
@endif

Gotchas and Tips

Pitfalls

Missing CDN Fallback
- If Google Fonts CDN fails, icons won’t load. Fix: Use a local fallback in config:
```
'cdn_fallback' => asset('vendor/material-icons/material-icons.css'),
```
- Publish the CSS manually:
```
php artisan vendor:publish --tag=material-icons-assets
```
Caching Issues
- Clear Blade cache after config changes:
```
php artisan view:clear
```
Icon Name Typos
- Validate names against Google’s list. Use VSCode snippets or IDE autocomplete for hints.

Debugging

Check Loaded Icons: Inspect <head> for injected <link> tags. Missing? Verify config icon_sets.
Console Errors: If icons render as squares, check:
- Network tab for 404 on Google Fonts URL.
- Browser console for Failed to load resource errors.

Laravel 13-Specific Tips

Auto-Discovery
- In Laravel 13, the package is auto-discovered. No need to manually register the service provider in config/app.php unless you're using Laravel <13 or customizing the discovery behavior.

Package Discovery

If you encounter issues with auto-discovery, ensure the composer.json includes the package in the extra.laravel section:

"extra": {
    "laravel": {
        "providers": [
            "Codeat3\\BladeGoogleMaterialDesignIcons\\BladeGoogleMaterialDesignIconsServiceProvider"
        ]
    }
}

Extension Points

Custom Directives Extend the package by creating a new directive (e.g., @materialIconOutline):

// app/Providers/BladeServiceProvider.php
Blade::directive('materialIconOutline', function ($icon) {
    return "<?php echo '<i class=\"material-icons-outlined\">'.$icon.'</i>'; ?>";
});

Theme Support Dynamically switch themes (e.g., light/dark mode):

@materialIcon('brightness_4', [], 'material-symbols', ['class' => $theme === 'dark' ? 'text-white' : 'text-black'])

Local Overrides Override default icons via config:

'overrides' => [
    'home' => 'home_outlined', // Replace default 'home' with outlined variant
],

Pro Tips

Bulk Replacement: Use regex to replace <i class="material-icons"> with @materialIcon() in existing views.

Accessibility: Always add aria-hidden="true" or labels:

@materialIcon('search', ['aria-label' => 'Search products'])

Performance: Load only needed icons via ?text= query in CDN URL (config option):

'cdn_url' => 'https://fonts.googleapis.com/icon?family=Material+Icons&text=home|search',

Blade Google Material Design Icons Laravel Package