secondnetwork/blade-google-material-symbols

A package to easily make use of blade-google-material-symbols in your Laravel Blade views.

v0.0.2 2025-10-26 08:06 UTC

Requires

• php: ^8.0
• blade-ui-kit/blade-icons: ^1.8
• illuminate/support: ^9.0|^10.0|^11.0|^12.0

Requires (Dev)

• orchestra/testbench: ^6.0|^7.0|^9.0
• phpunit/phpunit: ^9.0|^10.0|^11.0|^12.0

MIT

• Andreas Farah

• laravel
• blade
• blade-google-material-symbols

README

A Blade icon pack for the Google Material Symbols set, designed for easy use in Laravel projects. This package is built on top of the excellent blade-ui-kit/blade-icons package.

This package provides three primary icon styles: Outlined, Rounded, and Sharp. The Filled style is cleverly integrated by appending a -fill suffix to any icon name.

⚠️ Important Notice

Please note: In the current version, the icons are only accessible via the @svg() directive (or the {{ svg() }} helper) provided by blade-ui-kit/blade-icons. The previous component syntax (e.g., <x-gmso-home />) is not functional at this time. We are actively working to restore this functionality in a future update.

Requirements

• PHP 8.1+
• Laravel 9.0+
• blade-ui-kit/blade-icons (will be installed automatically)

Installation

You can install the package via composer:

composer require secondnetwork/blade-google-material-symbols

The package will automatically register itself.

Usage

Use the @svg() or {{ svg() }} directive to render an icon. The icons are identified by a prefix corresponding to their style.

Style	Prefix	Example (Outlined)	Example (Filled)
Outlined	gmso	@svg('gmso-home')	@svg('gmso-home-fill')
Rounded	gmsr	@svg('gmsr-home')	@svg('gmsr-home-fill')
Sharp	gmss	@svg('gmss-home')	@svg('gmss-home-fill')

How the "Filled" Style Works

Instead of providing a separate set for filled icons, you can get the filled version of any icon in any set by simply appending the -fill suffix to the icon's name.

Outlined Example:

{{-- Renders the outlined home icon --}}
@svg('gmso-home')

{{-- Renders the filled home icon --}}
@svg('gmso-home-fill')

Rounded Example:

{{-- Renders the rounded settings icon --}}
@svg('gmsr-settings')

{{-- Renders the filled rounded settings icon --}}
@svg('gmsr-settings-fill')

Styling

You can easily style the icons by passing an array of attributes like class, width, and height as the second parameter to the directive.

{{-- Using Tailwind CSS classes for size and color --}}
@svg('gmso-check-circle', ['class' => 'size-8 text-green-500'])

{{-- Setting explicit width and height --}}
@svg('gmsr-delete-fill', ['class' => 'text-red-600', 'width' => '24', 'height' => '24'])

Configuration

If you wish to customize the component prefixes, you can publish the configuration file:

php artisan vendor:publish --provider="secondnetwork\MaterialSymbols\BladeMaterialSymbolsServiceProvider"

This will create a config/blade-google-material-symbols.php file in your project. You can modify the prefixes for each set as needed.

// config/blade-google-material-symbols.php

return [
    'sets' => [
        'material-outlined' => [
            'path' => __DIR__.'/../resources/svg/material-outlined',
            'prefix' => 'gmso',
        ],
        'material-rounded' => [
            'path' => __DIR__.'/../resources/svg/material-rounded',
            'prefix' => 'gmsr',
        ],
        'material-sharp' => [
            'path' => __DIR__.'/../resources/svg/material-sharp',
            'prefix' => 'gmss',
        ],
    ],

    // You can also define a default class that will be applied to all icons.
    'default_class' => 'inline-block',
];

Maintainers

blade-google-material-symbols is developed and maintained by secondnetwork.

License

The MIT License (MIT). Please see License File for more information.