Weave Code
Blade Google Material Design Icons Laravel Package
codeat3/blade-google-material-design-icons
Use Google Material Design Icons as Blade components in Laravel. Powered by Blade Icons, supports configuration and icon caching for better performance. Browse included SVGs or preview icons on fonts.google.com. Compatible with PHP 7.4+ and Laravel 8+.
A package to easily make use of "Google Fonts Material Icons" in your Laravel Blade views.
Frequently asked questions about Blade Google Material Design Icons
- How do I install and use Google Material Icons in Laravel Blade views with this package?
- Run `composer require codeat3/blade-google-material-design-icons` to install. Use Blade components like `<x-gmdi-home/>` or `<x-gmdi-search/>` directly in your views. The package compiles these into SVG icons at runtime. For dynamic icons, use `@gmdi('icon-name')` syntax if configured.
- Does this package work with Laravel 13 and PHP 8.2+?
- Yes, the package is confirmed compatible with Laravel 13 and PHP 7.4+. The latest version (1.21.0+) explicitly supports Laravel 13, reducing future migration risks. Always check the [upgrade guide](UPGRADE.md) for version-specific notes.
- Can I use local SVG files instead of the Google Fonts CDN?
- The package defaults to Google Fonts CDN but can be configured to use local assets. Publish the config file with `php artisan vendor:publish --tag=blade-google-material-design-icons-config` and update the `asset_url` setting to point to your local SVGs in `public_path()`.
- How does this package handle asset versioning in Laravel Mix/Vite?
- The package doesn’t automatically handle Laravel Mix/Vite hashing, but you can override the default asset URL in the config to use locally compiled SVGs. For example, set `asset_url` to `mix('path/to/icons.svg')` or use Vite’s `@vite()` directive if using Vite.
- Can I customize icon sizes, colors, or add dynamic classes?
- Basic customization is limited to Blade Icons’ default classes/attributes via config. For advanced theming (e.g., dynamic sizes or colors), wrap the component in a Blade directive or create a facade. Example: `@gmdi('home', ['class' => 'text-blue-500', 'size' => '2x'])` may require custom logic.
- Will this package work with Livewire or Alpine.js components?
- Yes, the package is Blade-focused and will work seamlessly with Livewire or Alpine.js components. Since it renders SVGs directly in Blade, there’s no JavaScript dependency. Ensure your Livewire/Alpine components use the same Blade syntax (e.g., `<x-gmdi-icon/>`).
- Does this package support SVG sprites or only font-based icons?
- This package uses SVG icons directly (not font-based) and doesn’t support SVG sprites natively. All icons are compiled as individual SVGs. If you need sprites, consider alternatives like `laravel-svg` or manually manage sprites in your assets folder.
- How do I enable icon caching for better performance in production?
- Run `php artisan icons:cache` during deployment to pre-compile icons into Blade views. This reduces runtime overhead. Add it to your `post-deploy` script or CI pipeline. Caching is optional but recommended for production environments to improve load times.
- Are there conflicts with Tailwind CSS or other utility-first frameworks?
- No direct conflicts, but ensure your Tailwind classes (e.g., `text-red-500`) don’t override the package’s default SVG styles. The package uses inline SVG, so utility classes will apply normally. Test with your existing Tailwind setup to confirm.
- What are the alternatives if I need more customization (e.g., dynamic icons or theming)?
- For dynamic theming or advanced customization, consider `blade-icons` directly or packages like `laravel-svg` for manual SVG control. If you need user-uploaded icons, build a custom solution using Laravel’s file storage and Blade components. This package prioritizes simplicity over flexibility.
Weaver
How can I help you explore Laravel packages today?