PrestaShop Icons

Semantic icon helper for PrestaShop modules.

MprIcons::get('account');  // Just works

How It Works

• Admin: Uses Material Icons (auto-detected)
• Front: Reads from ps_mpr_config table, defaults to Font Awesome

Setup (Module Install)

Call init() from your module's install method:

public function install()
{
    MprIcons::init();  // Creates config table, detects theme icons
    return parent::install();
}

This will:

1. Create ps_mpr_config table if it doesn't exist
2. Detect theme icon set (checks theme.yml, assets for Material)
3. Save the detected preference

PHP

use MyPrestaRocks\Icons\MprIcons;

// Just call get() - it figures out the rest
echo MprIcons::get('account');
echo MprIcons::get('cart');
echo MprIcons::get('success', 'text-green');  // With extra class

// Get raw class/name (no HTML)
$class = MprIcons::raw('edit');  // 'fa fa-pencil' or 'edit'

JavaScript

Include the script and set icon set from PHP:

// In your module
$this->context->controller->addJS($this->getLocalPath() . 'vendor/myprestarocks/prestashop-icons/js/mpr-icons.js');
Media::addJsDef(['mprIconSet' => MprIcons::getIconSet()]);

MprIcons.get('account');              // HTML string
MprIcons.create('warning');           // DOM element
MprIcons.raw('edit');                 // Class/name only

Configuration

Front office icon set is stored in ps_mpr_config:

• module: mpr_global
• key: front_icon_set
• value: fontawesome or material

// Save preference
MprIcons::saveIconSet('material');

Available Icons

Name	Font Awesome	Material
account	fa fa-user	person
cart	fa fa-shopping-cart	shopping_cart
orders	fa fa-list	receipt_long
success	fa fa-check	check
error	fa fa-times	close
warning	fa fa-exclamation-triangle	warning
info	fa fa-info-circle	info
edit	fa fa-pencil	edit
delete	fa fa-trash	delete
search	fa fa-search	search
settings	fa fa-cog	settings
email	fa fa-envelope	email
phone	fa fa-phone	phone
lock	fa fa-lock	lock
logout	fa fa-sign-out	logout
home	fa fa-home	home
address	fa fa-map-marker	location_on
truck	fa fa-truck	local_shipping
credit-card	fa fa-credit-card	credit_card
calendar	fa fa-calendar	calendar_today
heart	fa fa-heart	favorite
star	fa fa-star	star
eye	fa fa-eye	visibility
eye-off	fa fa-eye-slash	visibility_off
close	fa fa-times	close
check	fa fa-check	check
plus	fa fa-plus	add
minus	fa fa-minus	remove
chevron-*	fa fa-chevron-*	chevron_*
arrow-*	fa fa-arrow-*	arrow_*
download	fa fa-download	download
upload	fa fa-upload	upload
refresh	fa fa-refresh	refresh
spinner	fa fa-spinner fa-spin	hourglass_empty
loading	fa fa-circle-o-notch fa-spin	autorenew

Full list: MprIcons::list()

SVG Sprites

For brand icons (payments, social), use the included SVG sprites. One request, multiple icons.

Payment Icons

Include sprite once (hidden), use anywhere:

<!-- In your template head or hidden container -->
{include file="$module_dir/vendor/myprestarocks/prestashop-icons/sprites/payments.svg"}

<!-- Use icons -->
<svg width="38" height="24"><use href="#visa"/></svg>
<svg width="38" height="24"><use href="#mastercard"/></svg>
<svg width="38" height="24"><use href="#paypal"/></svg>

Available: visa, mastercard, amex, paypal, stripe, applepay, googlepay, klarna, ideal, bancontact, sepa, card

Social Icons

{include file="$module_dir/vendor/myprestarocks/prestashop-icons/sprites/socials.svg"}

<svg width="24" height="24"><use href="#facebook"/></svg>
<svg width="24" height="24"><use href="#instagram"/></svg>
<svg width="24" height="24"><use href="#twitter"/></svg>

Available: facebook, twitter, instagram, linkedin, youtube, tiktok, pinterest, whatsapp, telegram, email-social, share

Styling SVG Sprites

/* Size */
svg { width: 40px; height: 25px; }

/* Or use classes */
.payment-icon { width: 40px; height: 25px; }
.social-icon { width: 24px; height: 24px; }

License

MIT