Templating - IconHelper from dereuromark / Icon is not displayed

I wanted to tryout the cakephp-templating plugin from @dereuromark ,
especially the Icon Helper

But the Icons don’t get displayed and I’m wondering what I did wrong.
Maybe someone can help me?.

I installed the plugin via

composer require dereuromark/cakephp-templating

activated the plugin in the “bin folder” via

./cake plugin load Templating

I added in the “initialize method” in “AppView.php”

    public function initialize(): void
    {
        $this->addHelper('Templating.Templating');
        $this->addHelper('Templating.Icon');
        $this->addHelper('Templating.IconSnippet');
    }

I added in “app_local.php”

    'Icon' => [
        'sets' => [
            'fas' => [
                'class' => \Templating\View\Icon\FontAwesome6Icon::class,
                'path' => WWW_ROOT.'assets'.DS.'@fontawesome'.DS.'sprites'.DS.'regular.svg',
            ],
        ],
    ],

I created a folder "webroot/assets/@fontawesome"
and copied the “font awesome” files into this folder

finally I added in a view file

echo $this->Html->link($this->Icon->render('user',[],['title'=>__('View')]), ['action' => 'view',$recipe->id],['escapeTitle'=>false]); 

This results in this source code:

<a href="/funnydomainname/admin/recipes/view/1"><span class="fa-solid fa-user" title="View"></span></a>

I if do debug($this->Icon->names());
I get a resultset:

ROOT/templates/Admin/Recipes/index.php (line 99)
[
  'fas' => [
    (int) 0 => 'comment-dots',
    (int) 1 => 'newspaper',
    (int) 2 => 'map',
    (int) 3 => 'face-grin-hearts',
    (int) 4 => 'window-minimize',
    (int) 5 => 'circle',
    (int) 6 => 'circle-up',
    (int) 7 => 'trash-can',
    (int) 8 => 'chess-king',
    (int) 9 => 'face-rolling-eyes',
    (int) 10 => 'calendar',
    (int) 11 => 'face-grin-tongue-wink',
    (int) 12 => 'comments',
    (int) 13 => 'chess-queen',
    (int) 14 => 'moon',
    (int) 15 => 'face-smile',
    (int) 16 => 'paper-plane',
    (int) 17 => 'hand-back-fist',
    (int) 18 => 'circle-play',
    (int) 19 => 'face-grin-beam',
    (int) 20 => 'hand-lizard',
    (int) 21 => 'face-meh',
    (int) 22 => 'hand-point-down',
    (int) 23 => 'face-grin-tongue',
    (int) 24 => 'square-caret-left',
    (int) 25 => 'hand-point-right',
    (int) 26 => 'object-group',
    (int) 27 => 'circle-dot',
    (int) 28 => 'circle-xmark',
    (int) 29 => 'futbol',
    (int) 30 => 'user',
    (int) 31 => 'images',
    (int) 32 => 'clone',
    (int) 33 => 'square-full',
    (int) 34 => 'face-grin-tongue-squint',
    (int) 35 => 'folder',
    (int) 36 => 'face-meh-blank',
    (int) 37 => 'face-grin-beam-sweat',
    (int) 38 => 'face-grimace',
    (int) 39 => 'comment',
    (int) 40 => 'chess-rook',
    (int) 41 => 'star',
    (int) 42 => 'closed-captioning',
    (int) 43 => 'bell-slash',
    (int) 44 => 'star-half',
    (int) 45 => 'folder-closed',
    (int) 46 => 'chess-pawn',
    (int) 47 => 'face-laugh-squint',
    (int) 48 => 'thumbs-down',
    (int) 49 => 'window-maximize',
    (int) 50 => 'file-video',
    (int) 51 => 'circle-down',
    (int) 52 => 'square-caret-right',
    (int) 53 => 'window-restore',
    (int) 54 => 'face-frown-open',
    (int) 55 => 'square-plus',
    (int) 56 => 'file-lines',
    (int) 57 => 'circle-question',
    (int) 58 => 'copy',
    (int) 59 => 'rectangle-list',
    (int) 60 => 'lightbulb',
    (int) 61 => 'circle-left',
    (int) 62 => 'calendar-minus',
    (int) 63 => 'square',
    (int) 64 => 'id-card',
    (int) 65 => 'life-ring',
    (int) 66 => 'calendar-days',
    (int) 67 => 'file-code',
    (int) 68 => 'face-grin',
    (int) 69 => 'face-kiss-beam',
    (int) 70 => 'credit-card',
    (int) 71 => 'file',
    (int) 72 => 'square-caret-up',
    (int) 73 => 'snowflake',
    (int) 74 => 'face-grin-wide',
    (int) 75 => 'heart',
    (int) 76 => 'money-bill-1',
    (int) 77 => 'square-caret-down',
    (int) 78 => 'hard-drive',
    (int) 79 => 'building',
    (int) 80 => 'face-laugh',
    (int) 81 => 'envelope-open',
    (int) 82 => 'star-half-stroke',
    (int) 83 => 'face-angry',
    (int) 84 => 'face-laugh-wink',
    (int) 85 => 'compass',
    (int) 86 => 'file-powerpoint',
    (int) 87 => 'calendar-xmark',
    (int) 88 => 'hand-spock',
    (int) 89 => 'circle-stop',
    (int) 90 => 'calendar-plus',
    (int) 91 => 'hand-point-left',
    (int) 92 => 'pen-to-square',
    (int) 93 => 'address-card',
    (int) 94 => 'floppy-disk',
    (int) 95 => 'face-smile-beam',
    (int) 96 => 'face-grin-squint-tears',
    (int) 97 => 'paste',
    (int) 98 => 'hand-point-up',
    (int) 99 => 'message',
    (int) 100 => 'file-image',
    (int) 101 => 'flag',
    (int) 102 => 'circle-check',
    (int) 103 => 'hand-pointer',
    (int) 104 => 'circle-right',
    (int) 105 => 'font-awesome',
    (int) 106 => 'face-smile-wink',
    (int) 107 => 'face-surprise',
    (int) 108 => 'sun',
    (int) 109 => 'file-audio',
    (int) 110 => 'face-tired',
    (int) 111 => 'hourglass-half',
    (int) 112 => 'hourglass',
    (int) 113 => 'hospital',
    (int) 114 => 'face-grin-squint',
    (int) 115 => 'file-pdf',
    (int) 116 => 'registered',
    (int) 117 => 'calendar-check',
    (int) 118 => 'chart-bar',
    (int) 119 => 'clipboard',
    (int) 120 => 'envelope',
    (int) 121 => 'file-excel',
    (int) 122 => 'face-flushed',
    (int) 123 => 'handshake',
    (int) 124 => 'keyboard',
    (int) 125 => 'address-book',
    (int) 126 => 'face-laugh-beam',
    (int) 127 => 'hand-scissors',
    (int) 128 => 'bookmark',
    (int) 129 => 'object-ungroup',
    (int) 130 => 'bell',
    (int) 131 => 'face-grin-stars',
    (int) 132 => 'folder-open',
    (int) 133 => 'image',
    (int) 134 => 'square-check',
    (int) 135 => 'circle-user',
    (int) 136 => 'hand',
    (int) 137 => 'hand-peace',
    (int) 138 => 'note-sticky',
    (int) 139 => 'face-sad-tear',
    (int) 140 => 'gem',
    (int) 141 => 'rectangle-xmark',
    (int) 142 => 'circle-pause',
    (int) 143 => 'square-minus',
    (int) 144 => 'chess-knight',
    (int) 145 => 'eye-slash',
    (int) 146 => 'file-word',
    (int) 147 => 'face-frown',
    (int) 148 => 'clock',
    (int) 149 => 'share-from-square',
    (int) 150 => 'id-badge',
    (int) 151 => 'face-kiss',
    (int) 152 => 'face-kiss-wink-heart',
    (int) 153 => 'copyright',
    (int) 154 => 'lemon',
    (int) 155 => 'chess-bishop',
    (int) 156 => 'face-grin-wink',
    (int) 157 => 'file-zipper',
    (int) 158 => 'eye',
    (int) 159 => 'face-grin-tears',
    (int) 160 => 'face-dizzy',
    (int) 161 => 'face-sad-cry',
    (int) 162 => 'thumbs-up',
  ],
]

The HTML seems to be printed correctly then.
But did u also include the necessary stylesheet and icon font as per fontawesome docs?
The helper does nothing else than taking care of php to html output. The manual html would also not show icons if you didnt include the assets in your html layout.

The docs mention it:

And the sandbox has a live setup to look at.

1 Like

Thank you very much for your answer.
I must have overseen this essential part.

Edit:
I just included the needed js files in my template. Now it works as expected.
Great Plugin. Thank you for this

1 Like