Yii2-icon Material demo - sjaakpriester.nl

Google Material Icons raw SVG icons in Yii2

Yii2-icon renders icons from SVG symbols. This is the fastest and most efficient way to display icons in your view. Take a peek at the source HTML of this page to see how it works.

video_call: filled, outlined, round, sharp, two-tone

Code

<?php
use sjaakp\icon\Icon;
?>

<p>
    <?= Icon::filled( 'video_call') ?>
    <?= Icon::outlined('video_call') ?>
    <?= Icon::round('video_call') ?>
    <?= Icon::sharp('video_call') ?>
    <?= Icon::twotone('video_call') ?>
    video_call: filled, outlined, round, sharp, two-tone</p>

filled pedal_bike, all blue

filled pedal_bike, icon blue

Code

<?php
use sjaakp\icon\Icon;
?>

<p class="blue"><?= Icon::filled('pedal_bike') ?> filled bicycle, all blue</p>
<p><?= Icon::filled('pedal_bike', [ 'class' => 'blue' ]) ?> filled pedal_bike, icon blue</p>

filled coffee, inverse

Code

<?php
use sjaakp\icon\Icon;
?>

<p>
    <?= Icon::filled('coffee') ?>
    <span class="bg-blue"> <?= Icon::filled('coffee', [ 'class' => 'fa-inverse' ]) ?> </span>
    filled coffee, inverse
</p>

filled coffee, fa-2xs ... fa-2xl

Code

<?php
use sjaakp\icon\Icon;
?>

<p>
    <?= Icon::filled('coffee', [ 'class' => 'fa-2xs' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-xs' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-sm' ]) ?>
    <?= Icon::filled('coffee') ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-lg' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-xl' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-2xl' ]) ?>
    filled coffee, fa-2xs ... fa-2xl
</p>

filled coffee, fa-1x, -2x, -3x, 7x, -10x

Code

<?php
use sjaakp\icon\Icon;
?>
    
<p>
    <?= Icon::filled('coffee', [ 'class' => 'fa-1x' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-2x' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-3x' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-7x' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-10x' ]) ?>
    filled coffee, fa-1x, -2x, -3x, 7x, -10x
</p>

rotations, flips

Code

<?php
use sjaakp\icon\Icon;
?>
    
<p>
    <?= Icon::filled('coffee') ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-rotate-90' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-rotate-180' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-rotate-270' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-rotate-by', 'style' => '--fa-rotate-angle: 45deg;' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-flip-horizontal' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-flip-vertical' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-flip-both' ]) ?>
    rotations, flips
</p>

beat, fade, beat-fade, bounce, flip, shake

Code

<?php
use sjaakp\icon\Icon;
?>
    
<p>
    <?= Icon::filled('coffee', [ 'class' => 'fa-beat' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-fade' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-beat-fade' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-bounce' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-flip' ]) ?>
    <?= Icon::filled('coffee', [ 'class' => 'fa-shake' ]) ?>
    beat, fade, beat-fade, bounce, flip, shake
</p>

spins

Code

<?php
use sjaakp\icon\Icon;
?>
    
<p>
    <?= Icon::filled('sync', [ 'class' => 'fa-spin' ]) ?>
    <?= Icon::filled('sync', [ 'class' => 'fa-spin fa-spin-reverse' ]) ?>
    <?= Icon::filled('sync', [ 'class' => 'fa-spin-pulse' ]) ?>
    spins
</p>

border

Code

<?php
use sjaakp\icon\Icon;
?>
    
<p><?= Icon::filled('coffee', [ 'class' => 'fa-border' ]) ?> border</p>

stack

Code

<?php
use sjaakp\icon\Icon;
?>
    
<p><span class="fa-stack">
    <?= Icon::filled('photo_camera', [ 'class' => 'fa-stack-1x' ]) ?>
    <?= Icon::filled('block', [ 'class' => 'fa-stack-2x tomato' ]) ?>
  </span> stack
</p>

NEW! 99 text, counter

Code

<?php
use sjaakp\icon\Icon;
?>
    
<p><span class="fa-layers fa-fw fa-2x">
        <?= Icon::filled('turned_in', [ 'class' => 'red' ]) ?>
        <span class="fa-layers-text new-text">NEW!</span>
    </span>
    <span class="fa-layers fa-fw fa-2x">
        <?= Icon::filled('mail') ?>
        <span class="fa-layers-counter">99</span>
    </span> text, counter
</p>