Getting Started with PHP

Material Design Icons can be used in PHP or Twig using a simple helper class.

Add @mdi/svg npm package to your project:

yarn add @mdi/svg # or, using npm npm install @mdi/svg

Add mesavolt/mdi-php package to your project:

composer require mesavolt/mdi-php

MaterialDesignIcons-PHP on GitHub


If you didn't install the icons pack using one of the 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:

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

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 nameDefault value
viewBox0 0 24 24
widthWhatever size was specified (defaults to 24)
heightWhatever size was specified (defaults to 24)
Mdi::withDefaultAttributes([ 'data-toggle' => 'tooltip', // Add a new one 'role' => 'img', // Replace default `presentation` value with `img` 'xmlns' => null, // Remove default `xmlns` attribute ]);

What about 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']]));
<button> {{ mdi('account', 'fill-muted', 42, {'aria-label': 'My account icon'}) }} My account </button>