avvertix/materialicons-laravel-bridge

Material Design Icons packaged for easy SVG inlining in Laravel Blade templates

, _(*1)

[!IMPORTANT] Material Icons Laravel Bridge has been deprecated with 2.1.0 as the last release. There are a number of alternatives based on Blade Icons (Blade UI Kit). Thank you for the support and contributions over the years. The repository will remain open and archived., _(*2)

Material Icons Laravel Bridge

Easily use Google Material Design SVG icons in Laravel Blade templates., _(*3)

For a full list of available icons see the SVG directories., _(*4)

Requirements

• PHP 7.2 or higher
• Laravel 7.14 or higher
• blade-ui-kit/blade-icons

Using version 1.x? Check the upgrade guide., _(*5)

Installation

You can install this package via Composer by running this command in your terminal in the root of your project:, _(*6)

composer require avvertix/materialicons-laravel-bridge

The service provider MaterialIcons\MaterialIconsBridgeServiceProvider::class is automatically registered as part of the Laravel service discovery, _(*7)

Configuration

By default the class icon is added to the svg tag when inserted into a page. You can change this behavior by overriding the configuration using the config/materialiconset.php file., _(*8)

A ready to use configuration file can be inserted in your config directory using php artisan vendor:publish --provider="MaterialIcons\MaterialIconsBridgeServiceProvider", _(*9)

You can specify any default CSS classes you'd like to be applied to your icons using the class option:, _(*10)

<?php

return [
    // ...
    'class' => 'icon', // Add the `icon` class to every SVG icon when rendered
    // ...
];

You can specify multiple classes by separating them with a space, just like you would in an HTML class attribute., _(*11)

Usage

Blade directive

To insert an icon in your template use the @materialicon directive, passing the name of the material icon set, the name of the icon and optionally any additional classes:, _(*12)

<a href="/settings">
    @materialicon('action', 'settings', 'icon-lg') Settings
</a>

To add additional attributes to the rendered SVG tag, pass an associative array as the third parameter:, _(*13)

<a href="/settings">
    @materialicon('action', 'settings', 'icon-lg', ['alt' => 'Gear icon']) Settings
</a>

If you'd like, you can use the materialicon helper directly. The helper exposes a fluent syntax for setting icon attributes:, _(*14)

<a href="/settings">
    {{ materialicon('actions', 'settings')->alt('Alt text')->dataFoo('bar')->dataBaz() }} Settings
</a>

Blade components

All icons are available as Blade components, thanks to Blade Icons, _(*15)

<x-materialicon_toggle-ic_star_half_24px />

The component name format is: package name materialicon, the set within the package toggle and the file name ic_star_half_24px., _(*16)

You can also pass classes to your icon components:, _(*17)

<x-materialicon_toggle-ic_star_half_24px class="icon-lg"/>

Or any other attributes for that matter:, _(*18)

<x-materialicon_toggle-ic_star_half_24px class="icon-lg" id="settings-icon" style="color: #555" data-baz/>

Helper

If you'd like, you can use the materialicon helper to expose a fluent syntax for setting SVG attributes:, _(*19)

{{ materialicon('toggle', 'star_half')->id('star-icon')->dataFoo('bar')->dataBaz() }}

Use another icon set

Even if this package makes easy to use Google's Material Design icons, it is not limited to that iconset., _(*20)

You can still use a different iconset as behind the scenes the blade-ui-kit/blade-icons package is used., _(*21)

Please check Blade Icon's documentation for all the configuration options and how to insert icons within your Blade views., _(*22)

Upgrade

Upgrading from an older version? Check the upgrade guide., _(*23)

Credits

• The icons comes from the Google Material Design Icons package;
• The package functionality was originally created on top of the great Blade SVG package by Adam Wathan now handed to Dries Vints as blade-ui-kit/blade-icons.