Easy MDI integration for PHP 7.1+

v1.1.0 2018-08-24 14:41 UTC

This package is auto-updated.

Last update: 2024-06-08 06:25:38 UTC


Painlessly drive away from using the MaterialDesignIcons webfont!

Latest Stable Version Build Status Coverage Status License


Add this package to your project:

composer require mesavolt/mdi-php

Using @mdi/svg npm package

Add @mdi/svg npm package to your project:

yarn add @mdi/svg

# or, using npm
npm install @mdi/svg

Icons location will be automatically detected.


If you didn't install the icons pack using one of the documentation methods above, you can globally configure the icons location. This should be done once and before the first usage of the Mdi::mdi function.



Use it in your views:

    <?php echo Mdi::mdi('account'); ?>
    My account

The mdi function provides 4 arguments to customize its output:

  • the icon (you can provide either account, mdi-account or mdi mdi-account)
  • its class (fill-muted for instance)
  • its size (defaults to 24px)
  • some more attributes that will be added to the <svg> tag (['aria-label' => 'My account'] for instance)

Default attributes

You can add custom default attributes, or edit and remove the provided defaults.

Attribute name Default value
viewBox 0 0 24 24
width Whatever size was specified (defaults to 24)
height Whatever size was specified (defaults to 24)
role presentation
    'data-toggle' => 'tooltip',     // Add a new one
    'role' => 'img',                // Replace default `presentation` value with `img`
    'xmlns' => null,                // Remove default `xmlns` attribute

Plugging it to Twig

Simply register Mdi::mdi as a Twig simple function and get started!

$twigEnv->addFunction(new \Twig_SimpleFunction('mdi', [Mdi::class, 'mdi'], ['is_safe' => ['html']]));
    {{ mdi('account', 'fill-muted', 42, {'aria-label': 'My account icon'}) }}
    My account