Skip to content
Painlessly drive away from using the MaterialDesignIcons webfont!
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
tests
.coveralls.yml
.gitignore
.travis.yml
LICENSE.md Add license & documentation Aug 21, 2018
README.md
composer.json
composer.lock Setup composer, add tests Aug 21, 2018
phpunit.xml Setup composer, add tests Aug 21, 2018

README.md

MaterialDesign-PHP

Painlessly drive away from using the MaterialDesignIcons webfont!

Latest Stable Version Build Status Coverage Status License

Installation

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.

Other

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.

Mdi::withIconsPath(__DIR__.'/../../../node_modules/@mdi/svg/svg/');

Usage

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 name Default value
viewBox 0 0 24 24
xmlns http://www.w3.org/2000/svg
width Whatever size was specified (defaults to 24)
height Whatever size was specified (defaults to 24)
role presentation
Mdi::withDefaultAttributes([
    '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']]));
<button>
    {{ mdi('account', 'fill-muted', 42, {'aria-label': 'My account icon'}) }}
    My account
</button>
You can’t perform that action at this time.