mervick / yii2-material-design-icons
Asset Bundle For Yii2 Framework With Google Material Design Icons
Installs: 32 467
Dependents: 7
Suggesters: 0
Security: 0
Stars: 8
Watchers: 2
Forks: 4
Open Issues: 0
Type:yii2-extension
Requires
- php: >=5.4.0
- mervick/material-design-icons: ~2.2
- yiisoft/yii2: *
This package is not auto-updated.
Last update: 2024-11-04 06:16:40 UTC
README
The extension provides Asset Bundle for Yii2-Framework with Google Material Design Icons and Icon helper for use icons font in Bootsrtap-style.
Installation
Recommended way to install via composer:
$ composer require "mervick/yii2-material-design-icons" "~1.0"
Usage
Register AssetBundle in your view:
yii\materialicons\AssetBundle::register($this);
or as dependency in yours AssetBundle:
class AppAsset extends \yii\web\AssetBundle { // ... public $depends = [ // ... '\\yii\\materialicons\\AssetBundle' ]; // ... }
Helper
use yii\materialicons\MD; echo MD::icon(MD::_ACCESS_ALARM); // <i class="mdi mdi-access-alarm"></i> echo MD::icon( 'keyboard-arrow-left', // equal to MD::_KEYBOARD_ARROW_LEFT ['class' => 'big', 'data-role' => 'arrow'] ); // <i class="big mdi mdi-keyboard-arrow-left" data-role="arrow"></i> echo Html::submitButton( Yii::t('app', '{icon} Save', ['icon' => MD::icon(MD::_CHECK)]) ); // <button type="submit"><i class="mdi mdi-check"></i> Save</button> // use other tags echo MD::icon(MD::_EQUALIZER)->tag('span'); // <span class="mdi mdi-equalizer"></span> echo MD::icon(MD::_EQUALIZER, ['tag' => 'span']); // <span class="mdi mdi-equalizer"></span> echo MD::icon(MD::_VERIFIED_USER, ['class' => 'form-control-feedback'])->tag('span'); // <span class="mdi mdi-verified-user form-control-feedback"></span> echo MD::icon(MD::_ACCESS_ALARM)->inverse(); // <i class="mdi mdi-access-alarm mdi-inverse"></i> echo MD::icon(MD::_ACCESS_ALARM)->spin(); // <i class="mdi mdi-access-alarm mdi-spin"></i> echo MD::icon(MD::_ACCESS_ALARM)->fixedWidth(); // <i class="mdi mdi-access-alarm mdi-fw"></i> echo MD::icon(MD::_ACCESS_ALARM)->border(); // <i class="mdi mdi-access-alarm mdi-border"></i> echo MD::icon(MD::_ACCESS_ALARM)->pullLeft(); // <i class="mdi mdi-access-alarm pull-left"></i> echo MD::icon(MD::_ACCESS_ALARM)->pullRight(); // <i class="mdi mdi-access-alarm pull-right"></i> echo MD::icon(MD::_ACCESS_ALARM)->size(MD::SIZE_3X); // values: MD::SIZE_LARGE, MD::SIZE_2X, MD::SIZE_3X, MD::SIZE_4X, MD::SIZE_5X // <i class="mdi mdi-access-alarm mdi-3x"></i> echo MD::icon(MD::_ACCESS_ALARM)->rotate(MD::ROTATE_90); // values: MD::ROTATE_90, MD::ROTATE_180, MD::ROTATE_180 // <i class="mdi mdi-access-alarm mdi-rotate-90"></i> echo MD::icon(MD::_ACCESS_ALARM)->flip(MD::FLIP_VERTICAL); // values: MD::FLIP_HORIZONTAL, MD::FLIP_VERTICAL // <i class="mdi mdi-access-alarm mdi-flip-vertical"></i> echo MD::icon(MD::_ACCESS_ALARM) ->spin() ->fixedWidth() ->pullLeft() ->size(MD::SIZE_LARGE); // <i class="mdi mdi-access-alarm mdi-spin mdi-fw pull-left mdi-lg"></i> echo MD::stack() ->icon('twitter') ->on('square-o'); // <span class="mdi-stack"> // <i class="mdi mdi-square-o mdi-stack-2x"></i> // <i class="mdi mdi-twitter mdi-stack-1x"></i> // </span> echo MD::stack(['data-role' => 'stacked-icon']) ->on((new MD\Icon('square'))->inverse()) ->icon((new MD\Icon(MD::_ACCESS_ALARM))->spin()); // <span class="mdi-stack" data-role="stacked-icon"> // <i class="mdi mdi-square-o mdi-inverse mdi-stack-2x"></i> // <i class="mdi mdi-cog mdi-spin mdi-stack-1x"></i> // </span> // autocomplete icons name in IDE echo MD::icon(MD::_COG); echo MD::icon(MD::_DESKTOP); echo MD::stack() ->on((new MD\Icon(MD::_SQUARE))->inverse()) ->icon((new MD\Icon(MD::_COG))->spin());