Use hooks to set page icons in admin menus and Page List

[Robin S]

A couple of hooks that I have found useful in some situations...

In the admin menus the icon associated with each page is normally determined by the "icon" item in the Process module config (e.g. as set in the getModuleInfo() method). But sometimes you might want to change that icon. For example, the Lister Pro module uses the "search-plus" icon, but this is not so good when you have multiple Lister Pro instances because it makes each instance less distinct.

With the hook below I can use a custom icon for the extra Lister Pro instances I have added:

// Add custom icons to Lister Pro menu items
$wire->addHookAfter('Page::getUnknown(page_icon)', function(HookEvent $event) {
	$page = $event->object;
	if($page->process == 'ProcessPageListerPro') {
		if($page->title === 'Flora species') {
			$event->return = 'leaf';
		} elseif($page->title === 'Flora images') {
			$event->return = 'picture-o';
		}
	}
});

If you change an icon in the admin menus like this you can do a Modules > Refresh to clear the menu cache and see the updated icon.

 

And for Page List you probably know that you can assign an icon to all pages that use a template in the template's "Advanced" tab. But with the hook below you can assign icons to pages more dynamically based on any properties of the page. So, for example, you could assign a warning icon to a page to alert site editors if some important field was left empty.

// Add warning icon to news items without a date
$wire->addHookAfter('Page::getIcon', function(HookEvent $event) {
	$page = $event->object;
	if($page->template == 'news_item' && !$page->date_1) {
		$event->return = 'exclamation-triangle';
	}
});

[Noel Boss]

There is kind of built in support for this;

- Edit the admin template and add a text field with the name "page_icon"

- Go to the admin page tree, search for your lister pages to edit:

– Add the fontawesome icon name without the fa- part… Voila:

 

Thanks to @ryan for pointing me to this solution in a support request… ?

[wbmnfktr]

In case your template already has an icon assigned per default, you might want to try this instead:

$wire->addHookBefore('Page::getIcon', function(HookEvent $event) {
	$page = $event->object;
	if($page->template == 'event' && !$page->datetimeend) {
		$page->template->icon = 'exclamation-triangle';
	} 
});

Otherwise the already defined icon shows up as text in your page listing.

[d'Hinnisdaël]

I can highly recommend @kixe's PageIcon module. It adds page_icon as a global field with a FontIconPicker input field. Works great for one-off changes, e.g. specific listers or module pages in the setup dropdown. For dynamic icons (warnings, etc.), the hook is the best solution.

[J_Szwarga]

@d'Hinnisdaël  I'm attempting to use the PageIcon module to show page icons on the front end through MarkupSimpleNavigation. Although it appears PageIcon is only for backend use. Do you know of a solution to this?

[d'Hinnisdaël]

5 hours ago, J_Szwarga said:

I'm attempting to use the PageIcon module to show page icons on the front end through MarkupSimpleNavigation. Although it appears PageIcon is only for backend use. Do you know of a solution to this?

Are you accessing it through $page->page_icon? That should give you the icon code.