Icon

The Icon class is a base class handling the displaying of icons.

Default implementation


<?= \macgyer\yii2materializecss\widgets\Icon::widget([
    'name' => 'local_restaurant',
]) ?>

<i id="w0" class="material-icons small">local_restaurant</i>

Rendered result

local_restaurant

Different sizes

The size of the icon can be adjusted by using the predefined constants for:

  • tiny
  • small (default)
  • medium
  • large

If the presets don't suit your needs, you can simply change the font size of the icon tag.


<?= \macgyer\yii2materializecss\widgets\Icon::widget([
    'name' => 'phone_bluetooth_speaker',
    'size' => \macgyer\yii2materializecss\widgets\Icon::SIZE_TINY,
]) ?>

<?= \macgyer\yii2materializecss\widgets\Icon::widget([
    'name' => 'phone_bluetooth_speaker',
    'size' => \macgyer\yii2materializecss\widgets\Icon::SIZE_SMALL,
]) ?>

<?= \macgyer\yii2materializecss\widgets\Icon::widget([
    'name' => 'phone_bluetooth_speaker',
    'size' => \macgyer\yii2materializecss\widgets\Icon::SIZE_MEDIUM,
]) ?>

<?= \macgyer\yii2materializecss\widgets\Icon::widget([
    'name' => 'phone_bluetooth_speaker',
    'size' => \macgyer\yii2materializecss\widgets\Icon::SIZE_LARGE,
]) ?>

<i id="w1" class="material-icons tiny">phone_bluetooth_speaker</i>
<i id="w2" class="material-icons small">phone_bluetooth_speaker</i>
<i id="w3" class="material-icons medium">phone_bluetooth_speaker</i>
<i id="w4" class="material-icons large">phone_bluetooth_speaker</i>

Rendered result

phone_bluetooth_speaker phone_bluetooth_speaker phone_bluetooth_speaker phone_bluetooth_speaker