From 875e446832b4f1e2da301745322492dff32ce52f Mon Sep 17 00:00:00 2001
From: Andreas Blaesius <andi@unlegacy-android.org>
Date: Sat, 29 Oct 2022 12:08:05 +0200
Subject: [PATCH] UI(material-icons): use CSS classes instead of ligatures to
 display icons

Change-Id: I19787600416d1ded89942124272f9de8acda64ec
---
 admin/debugpanel.php            |  7 +--
 admin/diskusage.php             |  3 +-
 admin/index.php                 | 27 +++++-----
 chromakeying.php                |  7 +--
 config/config.inc.php           | 87 ++++++++++++++++-----------------
 dependencies.php                |  5 +-
 gallery.php                     |  1 +
 index.php                       | 23 ++++-----
 lib/configsetup.inc.php         | 39 ++++++---------
 livechroma.php                  | 13 ++---
 login/index.php                 | 25 +++++-----
 manual/index.php                |  3 +-
 resources/lang/en.json          | 20 ++++----
 slideshow/index.php             |  3 +-
 src/js/core.js                  |  4 +-
 src/js/gallery.js               |  2 +-
 src/js/login.js                 |  2 +-
 src/js/photoinit.js             |  6 +--
 template/classic.template.php   | 10 ++--
 template/gallery.template.php   |  8 +--
 template/modern.template.php    | 10 ++--
 template/pswp.template.php      | 24 ++++-----
 template/send-mail.template.php |  2 +-
 test/preview.php                |  1 +
 trigger.php                     |  5 +-
 update.php                      | 11 +++--
 welcome.php                     |  1 +
 27 files changed, 177 insertions(+), 172 deletions(-)

diff --git a/admin/debugpanel.php b/admin/debugpanel.php
index 4c1619d27..61331af76 100644
--- a/admin/debugpanel.php
+++ b/admin/debugpanel.php
@@ -42,6 +42,7 @@
         <link rel="stylesheet" type="text/css" href="../node_modules/normalize.css/normalize.css">
         <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.css">
         <link rel="stylesheet" type="text/css" href="../node_modules/material-icons/iconfont/material-icons.css">
+        <link rel="stylesheet" type="text/css" href="../node_modules/material-icons/css/material-icons.css">
         <link rel="stylesheet" type="text/css" href="../node_modules/selectize/dist/css/selectize.css">
         <link rel="stylesheet" type="text/css" href="../resources/css/<?php echo $config['ui']['style']; ?>_admin.css?v=<?php echo $config['photobooth']['version']; ?>">
         <?php if (is_file("../private/overrides.css")): ?>
@@ -68,14 +69,14 @@ function html_src_indent($num)
                 html_src_indent($indent++);
                 echo '<div class="admintopnavbar">';
                 html_src_indent($indent);
-                echo $config['icons']['admin_back'];
+                echo '<i class="' . $config['icons']['admin_back'] . '" id="admintopnavbarback"></i>';
                 if(isset($_SESSION['auth']) && $_SESSION['auth'] === true)
                 {
                         html_src_indent($indent);
-                        echo $config['icons']['admin_signout'];
+                        echo '<i class="' . $config['icons']['admin_signout'] . '" id="admintopnavbarlogout"></i>';
                 }
                 html_src_indent($indent);
-                echo $config['icons']['admin_menutoggle'];
+                echo '<i class="' . $config['icons']['admin_menutoggle'] . '" id="admintopnavbarmenutoggle"></i>';
                 html_src_indent($indent);
                 echo '<i class="setting_section_heading"><span data-i18n="debugpanel">Debug Panel</span></i>';
                 html_src_indent(--$indent);
diff --git a/admin/diskusage.php b/admin/diskusage.php
index c8257254a..a48549790 100644
--- a/admin/diskusage.php
+++ b/admin/diskusage.php
@@ -45,6 +45,7 @@
 	<link rel="stylesheet" href="../node_modules/normalize.css/normalize.css" />
 	<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.css" />
 	<link rel="stylesheet" type="text/css" href="../node_modules/material-icons/iconfont/material-icons.css">
+	<link rel="stylesheet" type="text/css" href="../node_modules/material-icons/css/material-icons.css">
 	<link rel="stylesheet" href="../resources/css/login.css?v=<?php echo $config['photobooth']['version']; ?>" />
 	<?php if (is_file("../private/overrides.css")): ?>
 	<link rel="stylesheet" href="../private/overrides.css?v=<?php echo $config['photobooth']['version']; ?>" />
@@ -54,7 +55,7 @@
 <body class="loginbody">
 	<div class="login-panel <?php echo $uiShape; ?>">
 		<h2><?=$config['ui']['branding']?> <span data-i18n="disk_usage"></span></h2>
-		<a class="btn btn--tiny btn--flex <?php echo $btnShape; ?> back-to-admin" href="./"><?php echo $config['icons']['admin_back_short'] ?></a>
+		<a class="btn btn--tiny btn--flex <?php echo $btnShape; ?> back-to-admin" href="./"><i class="<?php echo $config['icons']['admin_back_short'] ?>"></i></a>
 		<button class="btn btn--tiny btn--flex <?php echo $btnShape; ?> download-zip-btn ">
 			<span data-i18n="download_zip"></span>
 		</button>
diff --git a/admin/index.php b/admin/index.php
index 4afd34cfe..d57f976d1 100644
--- a/admin/index.php
+++ b/admin/index.php
@@ -36,6 +36,7 @@
         <link rel="stylesheet" type="text/css" href="../node_modules/normalize.css/normalize.css">
         <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.css">
         <link rel="stylesheet" type="text/css" href="../node_modules/material-icons/iconfont/material-icons.css">
+        <link rel="stylesheet" type="text/css" href="../node_modules/material-icons/css/material-icons.css">
         <link rel="stylesheet" type="text/css" href="../node_modules/selectize/dist/css/selectize.css">
         <link rel="stylesheet" type="text/css" href="../resources/css/<?php echo $config['ui']['style']; ?>_admin.css?v=<?php echo $config['photobooth']['version']; ?>">
         <?php if (is_file("../private/overrides.css")): ?>
@@ -101,14 +102,14 @@ function isElementHidden($element_class, $setting)
                 html_src_indent($indent++);
                 echo '<div class="admintopnavbar">';
                 html_src_indent($indent);
-                echo $config['icons']['admin_back'];
+                echo '<i class="' . $config['icons']['admin_back'] . '" id="admintopnavbarback"></i>';
                 if(isset($_SESSION['auth']) && $_SESSION['auth'] === true)
                 {
                         html_src_indent($indent);
-                        echo '     ' . $config['icons']['admin_signout'];
+                        echo '     <i class="' . $config['icons']['admin_signout'] . '" id="admintopnavbarlogout"></i>';
                 }
                 html_src_indent($indent);
-                echo '     ' . $config['icons']['admin_menutoggle'];
+                echo '     <i class="' . $config['icons']['admin_menutoggle'] . '" id="admintopnavbarmenutoggle"></i>';
                 html_src_indent(--$indent);
                 echo '</div>';
 
@@ -146,11 +147,11 @@ function isElementHidden($element_class, $setting)
 <form  autocomplete="off">
 
         <div class="admincontent" id="admincontentpage">
-                    <button class="save-admin-btn <?php echo $btnShape; ?>" id="save-admin-btn">
+             <button class="save-admin-btn <?php echo $btnShape; ?>" id="save-admin-btn">
                      <span class="save"><span data-i18n="save"></span></span>
-                     <span class="saving"><?php echo $config['icons']['admin_save']; ?><span data-i18n="saving"></span></span>
-                     <span class="success"><?php echo $config['icons']['admin_save_success']; ?><span data-i18n="success"></span></span>
-                     <span class="error"><?php echo $config['icons']['admin_save_error']; ?><span data-i18n="saveerror"></span></span>
+                     <span class="saving"><i class="<?php echo $config['icons']['admin_save']; ?>"></i><span data-i18n="saving"></span></span>
+                     <span class="success"><i class="<?php echo $config['icons']['admin_save_success']; ?>"></i><span data-i18n="success"></span></span>
+                     <span class="error"><i class="<?php echo $config['icons']['admin_save_error']; ?>"></i><span data-i18n="saveerror"></span></span>
              </button>
         <?php
         
@@ -249,15 +250,15 @@ function isElementHidden($element_class, $setting)
                                              switch ($key) {
                                                     case 'reset_button':
                                                          echo '<span class="save"><span data-i18n="reset"></span></span>';
-                                                         echo '<span class="saving">' . $config['icons']['admin_save'] . '<span data-i18n="saving"></span></span>';
-                                                         echo '<span class="success">' . $config['icons']['admin_save_success'] . '<span data-i18n="success"></span></span>';
-                                                         echo '<span class="error">' . $config['icons']['admin_save_error'] . '<span data-i18n="saveerror"></span></span>';
+                                                         echo '<span class="saving"><i class="' . $config['icons']['admin_save'] . '"></i><span data-i18n="saving"></span></span>';
+                                                         echo '<span class="success"><i class="' . $config['icons']['admin_save_success'] . '"></i><span data-i18n="success"></span></span>';
+                                                         echo '<span class="error"><i class="' . $config['icons']['admin_save_error'] . '"></i><span data-i18n="saveerror"></span></span>';
                                                          break;
                                                     case 'database_rebuild':
                                                     case 'check_version':
-                                                         echo '<span class="saving">' . $config['icons']['admin_save'] . '<span data-i18n="busy"></span></span>';
-                                                         echo '<span class="success">' . $config['icons']['admin_save_success'] . '<span data-i18n="success"></span></span>';
-                                                         echo '<span class="error">' . $config['icons']['admin_save_error'] . '<span data-i18n="saveerror"></span></span>';
+                                                         echo '<span class="saving"><i class="' . $config['icons']['admin_save'] . '"></i><span data-i18n="busy"></span></span>';
+                                                         echo '<span class="success"><i class="' . $config['icons']['admin_save_success'] . '"></i><span data-i18n="success"></span></span>';
+                                                         echo '<span class="error"><i class="' . $config['icons']['admin_save_error'] . '"></i><span data-i18n="saveerror"></span></span>';
                                                          echo '<span class="text" data-i18n="'.$setting['placeholder'].'"></span>';
                                                          break;
                                                     default:
diff --git a/chromakeying.php b/chromakeying.php
index e5df28262..f2774aece 100644
--- a/chromakeying.php
+++ b/chromakeying.php
@@ -50,6 +50,7 @@
 		<link rel="stylesheet" href="node_modules/normalize.css/normalize.css" />
 		<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css" />
 		<link rel="stylesheet" href="node_modules/material-icons/iconfont/material-icons.css">
+		<link rel="stylesheet" href="node_modules/material-icons/css/material-icons.css">
 		<link rel="stylesheet" href="resources/css/<?php echo $config['ui']['style']; ?>_chromakeying.css?v=<?php echo $config['photobooth']['version']; ?>" />
 		<?php if (is_file("private/overrides.css")): ?>
 		<link rel="stylesheet" href="private/overrides.css?v=<?php echo $config['photobooth']['version']; ?>" />
@@ -75,13 +76,13 @@
 		</div>
 
 		<div class="chroma-control-bar">
-			<a class="<?php echo $btnClass; ?> rotaryfocus" id="save-chroma-btn" href="#"><?php echo $config['icons']['save']; ?> <span data-i18n="save"></span></a>
+			<a class="<?php echo $btnClass; ?> rotaryfocus" id="save-chroma-btn" href="#"><i class="<?php echo $config['icons']['save']; ?>"></i> <span data-i18n="save"></span></a>
 
 			<?php if ($config['print']['from_chromakeying']): ?>
-				<a class="<?php echo $btnClass; ?> rotaryfocus" id="print-btn" href="#"><?php echo $config['icons']['print']; ?> <span data-i18n="print"></span></a>
+				<a class="<?php echo $btnClass; ?> rotaryfocus" id="print-btn" href="#"><i class="<?php echo $config['icons']['print']; ?>"></i> <span data-i18n="print"></span></a>
 			<?php endif; ?>
 
-			<a class="<?php echo $btnClass; ?> rotaryfocus" id="close-btn" href="#"><?php echo $config['icons']['close']; ?> <span data-i18n="close"></span></a>
+			<a class="<?php echo $btnClass; ?> rotaryfocus" id="close-btn" href="#"><i class="<?php echo $config['icons']['close']; ?>"></i> <span data-i18n="close"></span></a>
 		</div>
 	<?php else:?>
 		<div style="text-align:center;padding-top:250px">
diff --git a/config/config.inc.php b/config/config.inc.php
index 8fb8765cd..ae56de53a 100644
--- a/config/config.inc.php
+++ b/config/config.inc.php
@@ -344,50 +344,49 @@
 
 
 // I C O N S
-$config['icons']['admin_back'] = '<i class="fa fa-long-arrow-left fa-3x" id="admintopnavbarback"></i>';
-$config['icons']['admin_back_short'] = '<i class="fa fa-arrow-left"></i>';
-$config['icons']['admin_menutoggle'] = '<i class="fa fa-bars fa-3x" id="admintopnavbarmenutoggle"></i>';
-$config['icons']['admin_save'] = '<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>';
-$config['icons']['admin_save_success'] = '<i class="fa fa-check"></i>';
-$config['icons']['admin_save_error'] = '<i class="fa fa-times"></i>';
-$config['icons']['admin_signout'] = '<i class="fa fa-sign-out fa-3x" id="admintopnavbarlogout"></i>';
-$config['icons']['admin'] = '<i class="fa fa-cog"></i>';
-$config['icons']['home'] = '<i class="fa fa-home"></i>';
-$config['icons']['gallery'] = '<i class="fa fa-picture-o"></i>';
-$config['icons']['dependencies'] = '<i class="fa fa-list-ul"></i>';
-$config['icons']['update'] = '<i class="fa fa-tasks"></i>';
-$config['icons']['slideshow'] = '<i class="fa fa-play"></i>';
-$config['icons']['livechroma'] = '<i class="fa fa-paint-brush"></i>';
-$config['icons']['faq'] = '<i class="fa fa-question-circle" aria-hidden="true"></i>';
-$config['icons']['manual'] = '<i class="fa fa-info-circle" aria-hidden="true"></i>';
-$config['icons']['telegram'] = '<i class="fa fa-telegram" aria-hidden="true"></i>';
-$config['icons']['cups'] = '<i class="fa fa-print" aria-hidden="true"></i>';
-$config['icons']['take_picture'] = '<i class="fa fa-camera"></i>';
-$config['icons']['take_collage'] = '<i class="fa fa-th-large"></i>';
-$config['icons']['close'] = '<i class="fa fa-times"></i>';
-$config['icons']['refresh'] = '<i class="fa fa-refresh"></i>';
-$config['icons']['delete'] = '<i class="fa fa-trash"></i>';
-$config['icons']['print'] = '<i class="fa fa-print"></i>';
-$config['icons']['save'] = '<i class="fa fa-floppy-o"></i>';
-$config['icons']['download'] = '<i class="fa fa-download"></i>';
-$config['icons']['qr'] = '<i class="fa fa-qrcode"></i>';
-$config['icons']['mail'] = '<i class="fa fa-envelope"></i>';
-$config['icons']['mail_close'] = '<i class="fa fa-times" id="send-mail-close"></i>';
-$config['icons']['mail_submit'] = '<i class="fa fa-spinner fa-spin"></i>';
-$config['icons']['filter'] = '<i class="fa fa-magic"></i>';
-$config['icons']['chroma'] = '<i class="fa fa-paint-brush"></i>';
-$config['icons']['fullscreen'] = '<i class="fa fa-arrows-alt"></i>';
-$config['icons']['share'] = '<i class="fa fa-share-alt" aria-hidden="true"></i>';
-$config['icons']['zoom'] = '<i class="fa fa-search-plus" aria-hidden="true"></i>';
-$config['icons']['logout'] = '<i class="fa fa-sign-out"></i>';
-$config['icons']['date'] = '<i class="fa fa-clock-o"></i>';
-$config['icons']['spinner'] = '<i class="fa fa-cog fa-spin"></i>';
-$config['icons']['update_git'] = '<i class="fa fa-play-circle"></i>';
-$config['icons_class']['close'] = 'fa fa-times';
-$config['icons_class']['password_visibility'] = 'fa fa-eye';
-$config['icons_class']['password_toggle'] = 'fa-eye fa-eye-slash';
-$config['icons_class']['slideshow_play'] = 'fa fa-play';
-$config['icons_class']['slideshow_toggle'] = 'fa-play fa-pause';
+$config['icons']['admin_back'] = 'fa fa-long-arrow-left fa-3x';
+$config['icons']['admin_back_short'] = 'fa fa-arrow-left';
+$config['icons']['admin_menutoggle'] = 'fa fa-bars fa-3x';
+$config['icons']['admin_save'] = 'fa fa-circle-o-notch fa-spin fa-fw';
+$config['icons']['admin_save_success'] = 'fa fa-check';
+$config['icons']['admin_save_error'] = 'fa fa-times';
+$config['icons']['admin_signout'] = 'fa fa-sign-out fa-3x';
+$config['icons']['admin'] = 'fa fa-cog';
+$config['icons']['home'] = 'fa fa-home';
+$config['icons']['gallery'] = 'fa fa-picture-o';
+$config['icons']['dependencies'] = 'fa fa-list-ul';
+$config['icons']['update'] = 'fa fa-tasks';
+$config['icons']['slideshow'] = 'fa fa-play';
+$config['icons']['livechroma'] = 'fa fa-paint-brush';
+$config['icons']['faq'] = 'fa fa-question-circle';
+$config['icons']['manual'] = 'fa fa-info-circle';
+$config['icons']['telegram'] = 'fa fa-telegram';
+$config['icons']['cups'] = 'fa fa-print';
+$config['icons']['take_picture'] = 'fa fa-camera';
+$config['icons']['take_collage'] = 'fa fa-th-large';
+$config['icons']['close'] = 'fa fa-times';
+$config['icons']['refresh'] = 'fa fa-refresh';
+$config['icons']['delete'] = 'fa fa-trash';
+$config['icons']['print'] = 'fa fa-print';
+$config['icons']['save'] = 'fa fa-floppy-o';
+$config['icons']['download'] = 'fa fa-download';
+$config['icons']['qr'] = 'fa fa-qrcode';
+$config['icons']['mail'] = 'fa fa-envelope';
+$config['icons']['mail_close'] = 'fa fa-times';
+$config['icons']['mail_submit'] = 'fa fa-spinner fa-spin';
+$config['icons']['filter'] = 'fa fa-magic';
+$config['icons']['chroma'] = 'fa fa-paint-brush';
+$config['icons']['fullscreen'] = 'fa fa-arrows-alt';
+$config['icons']['share'] = 'fa fa-share-alt';
+$config['icons']['zoom'] = 'fa fa-search-plus';
+$config['icons']['logout'] = 'fa fa-sign-out';
+$config['icons']['date'] = 'fa fa-clock-o';
+$config['icons']['spinner'] = 'fa fa-cog fa-spin';
+$config['icons']['update_git'] = 'fa fa-play-circle';
+$config['icons']['password_visibility'] = 'fa fa-eye';
+$config['icons']['password_toggle'] = 'fa-eye fa-eye-slash';
+$config['icons']['slideshow_play'] = 'fa fa-play';
+$config['icons']['slideshow_toggle'] = 'fa-play fa-pause';
 
 
 // J P E G   Q U A L I T Y
diff --git a/dependencies.php b/dependencies.php
index 867200901..f2529a042 100644
--- a/dependencies.php
+++ b/dependencies.php
@@ -46,6 +46,7 @@
 	<link rel="stylesheet" href="node_modules/normalize.css/normalize.css" />
 	<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css" />
 	<link rel="stylesheet" href="node_modules/material-icons/iconfont/material-icons.css">
+	<link rel="stylesheet" href="node_modules/material-icons/css/material-icons.css">
 	<link rel="stylesheet" href="resources/css/<?php echo $config['ui']['style']; ?>_style.css?v=<?php echo $config['photobooth']['version']; ?>" />
 	<link rel="stylesheet" href="resources/css/update.css?v=<?php echo $config['photobooth']['version']; ?>" />
 	<?php if (is_file("private/overrides.css")): ?>
@@ -61,9 +62,9 @@
 	</div>
 
 	<div>
-		<a href="./" class="<?php echo $btnClass; ?>"><?php echo $config['icons']['home']; ?> <span data-i18n="home"></span></a>
+		<a href="./" class="<?php echo $btnClass; ?>"><i class="<?php echo $config['icons']['home']; ?>"></i> <span data-i18n="home"></span></a>
 
-		<a href="admin" class="<?php echo $btnClass; ?>"><?php echo $config['icons']['admin']; ?> <span data-i18n="admin_panel"></span></a>
+		<a href="admin" class="<?php echo $btnClass; ?>"><i class="<?php echo $config['icons']['admin']; ?>"></i> <span data-i18n="admin_panel"></span></a>
 	</div>
 
 	<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
diff --git a/gallery.php b/gallery.php
index ed640e94f..ba3666706 100644
--- a/gallery.php
+++ b/gallery.php
@@ -51,6 +51,7 @@
 	<link rel="stylesheet" href="node_modules/normalize.css/normalize.css" />
 	<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css" />
 	<link rel="stylesheet" href="node_modules/material-icons/iconfont/material-icons.css">
+	<link rel="stylesheet" href="node_modules/material-icons/css/material-icons.css">
 	<link rel="stylesheet" href="vendor/PhotoSwipe/dist/photoswipe.css" />
 	<link rel="stylesheet" href="vendor/PhotoSwipe/dist/default-skin/default-skin.css" />
 	<link rel="stylesheet" href="resources/css/<?php echo $config['ui']['style']; ?>_style.css?v=<?php echo $config['photobooth']['version']; ?>" />
diff --git a/index.php b/index.php
index 46d379474..27fa359d6 100644
--- a/index.php
+++ b/index.php
@@ -65,6 +65,7 @@
     <link rel="stylesheet" href="node_modules/normalize.css/normalize.css"/>
     <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css"/>
     <link rel="stylesheet" href="node_modules/material-icons/iconfont/material-icons.css">
+    <link rel="stylesheet" href="node_modules/material-icons/css/material-icons.css">
     <link rel="stylesheet" href="vendor/PhotoSwipe/dist/photoswipe.css"/>
     <link rel="stylesheet" href="vendor/PhotoSwipe/dist/default-skin/default-skin.css"/>
     <link rel="stylesheet" href="resources/css/<?php echo $config['ui']['style']; ?>_style.css?v=<?php echo $config['photobooth']['version']; ?>"/>
@@ -87,7 +88,7 @@
     <!-- image Filter Pane -->
     <?php if ($config['filters']['enabled']): ?>
         <div id="mySidenav" class="dragscroll sidenav rotarygroup">
-            <a href="#" class="<?php echo $btnClass; ?> closebtn rotaryfocus"><?php echo $config['icons']['close']; ?></a>
+            <a href="#" class="<?php echo $btnClass; ?> closebtn rotaryfocus"><i class="<?php echo $config['icons']['close']; ?>"></i></a>
 
             <?php foreach (AVAILABLE_FILTERS as $filter => $name): ?>
                 <?php if (!in_array($filter, $config['filters']['disabled'])): ?>
@@ -104,7 +105,7 @@ class="filter <?php if ($config['filters']['defaults'] === $filter) echo 'active
     <div class="stages" id="loader">
         <div class="loaderInner">
             <div class="spinner">
-                <?php echo $config['icons']['spinner']; ?>
+                <i class="<?php echo $config['icons']['spinner']; ?>"></i>
             </div>
 
             <div id="ipcam--view" class="<?php echo $config['preview']['style']; ?>"></div>
@@ -123,51 +124,51 @@ class="filter <?php if ($config['filters']['defaults'] === $filter) echo 'active
 
         <div class="resultInner hidden">
             <?php if ($config['button']['homescreen']): ?>
-                <a href="#" class="<?php echo $btnClass; ?> homebtn rotaryfocus"><?php echo $config['icons']['home']; ?> <span
+                <a href="#" class="<?php echo $btnClass; ?> homebtn rotaryfocus"><i class="<?php echo $config['icons']['home']; ?>"></i> <span
                             data-i18n="home"></span></a>
             <?php endif; ?>
 
             <?php if ($config['gallery']['enabled']): ?>
-                <a href="#" class="<?php echo $btnClass; ?> gallerybtn rotaryfocus"><?php echo $config['icons']['gallery']; ?> <span data-i18n="gallery"></span></a>
+                <a href="#" class="<?php echo $btnClass; ?> gallerybtn rotaryfocus"><i class="<?php echo $config['icons']['gallery']; ?>"></i> <span data-i18n="gallery"></span></a>
             <?php endif; ?>
 
             <?php if ($config['qr']['enabled']): ?>
-                <a href="#" class="<?php echo $btnClass; ?> qrbtn rotaryfocus"><?php echo $config['icons']['qr']; ?> <span
+                <a href="#" class="<?php echo $btnClass; ?> qrbtn rotaryfocus"><i class="<?php echo $config['icons']['qr']; ?>"></i> <span
                             data-i18n="qr"></span></a>
             <?php endif; ?>
 
             <?php if ($config['mail']['enabled']): ?>
-                <a href="#" class="<?php echo $btnClass; ?> mailbtn rotaryfocus"><?php echo $config['icons']['mail']; ?> <span
+                <a href="#" class="<?php echo $btnClass; ?> mailbtn rotaryfocus"><i class="<?php echo $config['icons']['mail']; ?>"></i> <span
                             data-i18n="mail"></span></a>
             <?php endif; ?>
 
             <?php if ($config['print']['from_result']): ?>
-                <a href="#" class="<?php echo $btnClass; ?> printbtn rotaryfocus"><?php echo $config['icons']['print']; ?> <span
+                <a href="#" class="<?php echo $btnClass; ?> printbtn rotaryfocus"><i class="<?php echo $config['icons']['print']; ?>"></i> <span
                             data-i18n="print"></span></a>
             <?php endif; ?>
 
             <?php if (!$config['button']['force_buzzer']): ?>
                 <?php if (!($config['collage']['enabled'] && $config['collage']['only'])): ?>
-                    <a href="#" class="<?php echo $btnClass; ?> newpic rotaryfocus"><?php echo $config['icons']['take_picture']; ?> <span
+                    <a href="#" class="<?php echo $btnClass; ?> newpic rotaryfocus"><i class="<?php echo $config['icons']['take_picture']; ?>"></i> <span
                                 data-i18n="newPhoto"></span></a>
                 <?php endif; ?>
 
                 <?php if ($config['collage']['enabled']): ?>
-                    <a href="#" class="<?php echo $btnClass; ?> newcollage rotaryfocus"><?php echo $config['icons']['take_collage']; ?>
+                    <a href="#" class="<?php echo $btnClass; ?> newcollage rotaryfocus"><i class="<?php echo $config['icons']['take_collage']; ?>"></i>
                         <span
                                 data-i18n="newCollage"></span></a>
                 <?php endif; ?>
             <?php endif; ?>
 
             <?php if ($config['filters']['enabled']): ?>
-                <a href="#" class="<?php echo $btnClass; ?> imageFilter rotaryfocus"><?php echo $config['icons']['filter']; ?> <span
+                <a href="#" class="<?php echo $btnClass; ?> imageFilter rotaryfocus"><i class="<?php echo $config['icons']['filter']; ?>"></i> <span
                             data-i18n="selectFilter"></span></a>
             <?php endif; ?>
 
             <?php if ($config['picture']['allow_delete']): ?>
                 <a href="#" class="<?php echo $btnClass; ?> deletebtn <?php if ($config['delete']['no_request']) {
                     echo 'rotaryfocus';
-                } ?> "><?php echo $config['icons']['delete']; ?> <span data-i18n="delete"></span></a>
+                } ?> "><i class="<?php echo $config['icons']['delete']; ?>"></i> <span data-i18n="delete"></span></a>
             <?php endif; ?>
         </div>
 
diff --git a/lib/configsetup.inc.php b/lib/configsetup.inc.php
index 10f0cc38b..e8275911b 100644
--- a/lib/configsetup.inc.php
+++ b/lib/configsetup.inc.php
@@ -2365,40 +2365,33 @@
             'placeholder' => htmlentities($defaultConfig['icons']['update_git'] ?? ''),
             'value' => htmlentities($config['icons']['update_git'] ?? ''),
         ],
-        'icons_class_close' => [
+        'icons_password_visibility' => [
             'view' => 'expert',
             'type' => 'input',
-            'name' => 'icons_class[close]',
-            'placeholder' => $defaultConfig['icons_class']['close'],
-            'value' => $config['icons_class']['close'],
+            'name' => 'icons[password_visibility]',
+            'placeholder' => $defaultConfig['icons']['password_visibility'],
+            'value' => $config['icons']['password_visibility'],
         ],
-        'icons_class_password_visibility' => [
+        'icons_password_toggle' => [
             'view' => 'expert',
             'type' => 'input',
-            'name' => 'icons_class[password_visibility]',
-            'placeholder' => $defaultConfig['icons_class']['password_visibility'],
-            'value' => $config['icons_class']['password_visibility'],
+            'name' => 'icons[password_toggle]',
+            'placeholder' => $defaultConfig['icons']['password_toggle'],
+            'value' => $config['icons']['password_toggle'],
         ],
-        'icons_class_password_toggle' => [
+        'icons_slideshow_play' => [
             'view' => 'expert',
             'type' => 'input',
-            'name' => 'icons_class[password_toggle]',
-            'placeholder' => $defaultConfig['icons_class']['password_toggle'],
-            'value' => $config['icons_class']['password_toggle'],
+            'name' => 'icons[slideshow_play]',
+            'placeholder' => $defaultConfig['icons']['slideshow_play'],
+            'value' => $config['icons']['slideshow_play'],
         ],
-        'icons_class_slideshow_play' => [
+        'icons_slideshow_toggle' => [
             'view' => 'expert',
             'type' => 'input',
-            'name' => 'icons_class[slideshow_play]',
-            'placeholder' => $defaultConfig['icons_class']['slideshow_play'],
-            'value' => $config['icons_class']['slideshow_play'],
-        ],
-        'icons_class_slideshow_toggle' => [
-            'view' => 'expert',
-            'type' => 'input',
-            'name' => 'icons_class[slideshow_toggle]',
-            'placeholder' => $defaultConfig['icons_class']['slideshow_toggle'],
-            'value' => $config['icons_class']['slideshow_toggle'],
+            'name' => 'icons[slideshow_toggle]',
+            'placeholder' => $defaultConfig['icons']['slideshow_toggle'],
+            'value' => $config['icons']['slideshow_toggle'],
         ],
         'ui_branding' => [
             'view' => 'expert',
diff --git a/livechroma.php b/livechroma.php
index f99e10a34..383a74ade 100644
--- a/livechroma.php
+++ b/livechroma.php
@@ -50,6 +50,7 @@
     <link rel="stylesheet" href="node_modules/normalize.css/normalize.css"/>
     <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css"/>
     <link rel="stylesheet" href="node_modules/material-icons/iconfont/material-icons.css">
+    <link rel="stylesheet" href="node_modules/material-icons/css/material-icons.css">
     <link rel="stylesheet" href="vendor/PhotoSwipe/dist/photoswipe.css"/>
     <link rel="stylesheet" href="vendor/PhotoSwipe/dist/default-skin/default-skin.css"/>
     <link rel="stylesheet" href="resources/css/<?php echo $config['ui']['style']; ?>_live_chromakeying.css?v=<?php echo $config['photobooth']['version']; ?>"/>
@@ -68,11 +69,11 @@
     <div class="rotarygroup" id="start">
         <div class="top-bar">
             <?php if (!$config['live_keying']['enabled']): ?>
-                <a href="index.php" class="<?php echo $btnClass; ?> livechroma-close-btn rotaryfocus"><?php echo $config['icons']['close']; ?></a>
+                <a href="index.php" class="<?php echo $btnClass; ?> livechroma-close-btn rotaryfocus"><i class="<?php echo $config['icons']['close']; ?>"></i></a>
             <?php endif; ?>
 
             <?php if ($config['gallery']['enabled']): ?>
-                <a href="#" class="<?php echo $btnClass ?> livechroma-gallery-btn rotaryfocus"><?php echo $config['icons']['gallery']; ?>
+                <a href="#" class="<?php echo $btnClass ?> livechroma-gallery-btn rotaryfocus"><i class="<?php echo $config['icons']['gallery']; ?>"></i>
                     <span data-i18n="gallery"></span></a>
             <?php endif; ?>
         </div>
@@ -88,7 +89,7 @@
         <div class="stages" id="loader">
             <div class="loaderInner">
                 <div class="spinner">
-                    <?php echo $config['icons']['spinner']; ?>
+                    <i class="<?php echo $config['icons']['spinner']; ?>"></i>
                 </div>
 
                 <div id="ipcam--view" class="<?php echo $config['preview']['style']; ?>"></div>
@@ -121,13 +122,13 @@ class="<?php echo $config['preview']['flip']; ?> <?php echo $config['preview']['
         </div>
 
         <div class="chroma-control-bar">
-            <a href="#" class="<?php echo $btnClass; ?> takeChroma livechroma rotaryfocus"><?php echo $config['icons']['take_picture']; ?>
+            <a href="#" class="<?php echo $btnClass; ?> takeChroma livechroma rotaryfocus"><i class="<?php echo $config['icons']['take_picture']; ?>"></i>
                 <span data-i18n="takePhoto"></span></a>
             <?php if ($config['picture']['allow_delete']): ?>
-                <a href="#" class="<?php echo $btnClass; ?> deletebtn livechroma"><?php echo $config['icons']['delete']; ?> <span
+                <a href="#" class="<?php echo $btnClass; ?> deletebtn livechroma"><i class="<?php echo $config['icons']['delete']; ?>"></i> <span
                             data-i18n="delete"></span></a>
             <?php endif; ?>
-            <a href="#" class="<?php echo $btnClass; ?> reloadPage livechroma rotaryfocus"><?php echo $config['icons']['refresh']; ?>
+            <a href="#" class="<?php echo $btnClass; ?> reloadPage livechroma rotaryfocus"><i class="<?php echo $config['icons']['refresh']; ?>"></i>
                 <span data-i18n="reload"></span></a>
         </div>
     </div>
diff --git a/login/index.php b/login/index.php
index b25f557a7..e16913dc2 100644
--- a/login/index.php
+++ b/login/index.php
@@ -47,6 +47,7 @@
 	<link rel="stylesheet" href="../node_modules/normalize.css/normalize.css" />
 	<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.css" />
 	<link rel="stylesheet" href="../node_modules/material-icons/iconfont/material-icons.css">
+	<link rel="stylesheet" href="../node_modules/material-icons/css/material-icons.css">
 	<link rel="stylesheet" href="../resources/css/login.css?v=<?php echo $config['photobooth']['version']; ?>" />
 	<?php if (is_file("../private/overrides.css")): ?>
 	<link rel="stylesheet" href="../private/overrides.css?v=<?php echo $config['photobooth']['version']; ?>" />
@@ -73,28 +74,28 @@
 		<hr>
 		<?php endif; ?>
 		<?php if(!$config['protect']['admin'] || (!$config['protect']['localhost_admin'] && $_SERVER['REMOTE_ADDR'] === $_SERVER['SERVER_ADDR']) || !$config['login']['enabled'] || (isset($_SESSION['auth']) && $_SESSION['auth'] === true)): ?>
-		<p><a href="../admin" class="<?php echo $btnClass; ?>"><?php echo $config['icons']['admin']; ?> <span data-i18n="admin_panel"></span></a></p>
-		<p><a href="../dependencies.php" class="<?php echo $btnClass; ?>"><?php echo $config['icons']['dependencies']; ?> <span data-i18n="dependencies_check"></span></a></p>
+		<p><a href="../admin" class="<?php echo $btnClass; ?>"><i class="<?php echo $config['icons']['admin']; ?>"></i> <span data-i18n="admin_panel"></span></a></p>
+		<p><a href="../dependencies.php" class="<?php echo $btnClass; ?>"><i class="<?php echo $config['icons']['dependencies']; ?>"></i> <span data-i18n="dependencies_check"></span></a></p>
 		<?php endif; ?>
 		<?php if(!$config['protect']['update'] || (!$config['protect']['localhost_update'] && $_SERVER['REMOTE_ADDR'] === $_SERVER['SERVER_ADDR']) || !$config['login']['enabled'] || (isset($_SESSION['auth']) && $_SESSION['auth'] === true)): ?>
-		<p><a href="../update.php" class="<?php echo $btnClass; ?>"><?php echo $config['icons']['update']; ?> <span data-i18n="updater"></span></a></p>
+		<p><a href="../update.php" class="<?php echo $btnClass; ?>"><i class="<?php echo $config['icons']['update']; ?>"></i> <span data-i18n="updater"></span></a></p>
 		<?php endif; ?>
-		<p><a href="../gallery.php" class="<?php echo $btnClass; ?>"><?php echo $config['icons']['gallery']; ?> <span data-i18n="gallery"></span></a></p>
-		<p><a href="../slideshow" class="<?php echo $btnClass; ?>"><?php echo $config['icons']['slideshow']; ?> <span data-i18n="slideshow"></span></a></p>
+		<p><a href="../gallery.php" class="<?php echo $btnClass; ?>"><i class="<?php echo $config['icons']['gallery']; ?>"></i> <span data-i18n="gallery"></span></a></p>
+		<p><a href="../slideshow" class="<?php echo $btnClass; ?>"><i class="<?php echo $config['icons']['slideshow']; ?>"></i> <span data-i18n="slideshow"></span></a></p>
 		<?php if(!$config['protect']['index'] || (!$config['protect']['localhost_index'] && $_SERVER['REMOTE_ADDR'] === $_SERVER['SERVER_ADDR']) || !$config['login']['enabled'] || (isset($_SESSION['auth']) && $_SESSION['auth'] === true)): ?>
-		<p><a href="../livechroma.php" class="<?php echo $btnClass; ?>"><?php echo $config['icons']['livechroma']; ?> <span data-i18n="livechroma"></span></a></p>
+		<p><a href="../livechroma.php" class="<?php echo $btnClass; ?>"><i class="<?php echo $config['icons']['livechroma']; ?>"></i> <span data-i18n="livechroma"></span></a></p>
 		<?php endif; ?>
 		<?php if(!$config['protect']['manual'] || (!$config['protect']['localhost_manual'] && $_SERVER['REMOTE_ADDR'] === $_SERVER['SERVER_ADDR']) || !$config['login']['enabled'] || (isset($_SESSION['auth']) && $_SESSION['auth'] === true)): ?>
-		<p><a href="../manual/faq.php" class="<?php echo $btnClass; ?>" title="FAQ" target="newwin"><?php echo $config['icons']['faq']; ?> <span data-i18n="show_faq"></span></a></p>
-		<p><a href="../manual" class="<?php echo $btnClass; ?>" title="Manual" target="newwin"><?php echo $config['icons']['manual']; ?> <span data-i18n="show_manual"></span></a></p>
-		<p><a href="https://t.me/PhotoboothGroup" class="<?php echo $btnClass; ?>" title="Telegram" target="newwin"><?php echo $config['icons']['telegram']; ?> <span data-i18n="telegram"></span></a></p>
+		<p><a href="../manual/faq.php" class="<?php echo $btnClass; ?>" title="FAQ" target="newwin"><i class="<?php echo $config['icons']['faq']; ?>"></i> <span data-i18n="show_faq"></span></a></p>
+		<p><a href="../manual" class="<?php echo $btnClass; ?>" title="Manual" target="newwin"><i class="<?php echo $config['icons']['manual']; ?>"></i> <span data-i18n="show_manual"></span></a></p>
+		<p><a href="https://t.me/PhotoboothGroup" class="<?php echo $btnClass; ?>" title="Telegram" target="newwin"><i class="<?php echo $config['icons']['telegram']; ?>"></i> <span data-i18n="telegram"></span></a></p>
 		<?php endif; ?>
-		<p><a href="./" class="<?php echo $btnClass; ?>"><?php echo $config['icons']['refresh']; ?> <span data-i18n="reload"></span></a></p>
+		<p><a href="./" class="<?php echo $btnClass; ?>"><i class="<?php echo $config['icons']['refresh']; ?>"></i> <span data-i18n="reload"></span></a></p>
 		<?php if(!$config['protect']['index'] || (!$config['protect']['localhost_index'] && $_SERVER['REMOTE_ADDR'] === $_SERVER['SERVER_ADDR']) || !$config['login']['enabled'] || (isset($_SESSION['auth']) && $_SESSION['auth'] === true)): ?>
-		<p><a href="../" class="<?php echo $btnClass; ?>" ><?php echo $config['icons']['close']; ?> <span data-i18n="close"></span></a></p>
+		<p><a href="../" class="<?php echo $btnClass; ?>" ><i class="<?php echo $config['icons']['close']; ?>"></i> <span data-i18n="close"></span></a></p>
 		<?php endif; ?>
 		<?php if(isset($_SESSION['auth']) && $_SESSION['auth'] === true): ?>
-		<p><a href="logout.php" class="<?php echo $btnClass; ?>"><?php echo $config['icons']['logout']; ?> <span data-i18n="logout"></span></a></p>
+		<p><a href="logout.php" class="<?php echo $btnClass; ?>"><i class="<?php echo $config['icons']['logout']; ?>"></i> <span data-i18n="logout"></span></a></p>
 		<?php endif; ?>
 	</div>
 
diff --git a/manual/index.php b/manual/index.php
index 4e069c965..d220c9944 100644
--- a/manual/index.php
+++ b/manual/index.php
@@ -41,6 +41,7 @@
 	<link rel="stylesheet" type="text/css" href="../node_modules/normalize.css/normalize.css" />
 	<link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.css" />
 	<link rel="stylesheet" type="text/css" href="../node_modules/material-icons/iconfont/material-icons.css">
+	<link rel="stylesheet" type="text/css" href="../node_modules/material-icons/css/material-icons.css">
 	<link rel="stylesheet" type="text/css" href="../resources/css/manual.css?v=<?php echo $config['photobooth']['version']; ?>" />
 	<?php if (is_file("../private/overrides.css")): ?>
 	<link rel="stylesheet" href="../private/overrides.css?v=<?php echo $config['photobooth']['version']; ?>" />
@@ -134,7 +135,7 @@
 				?>
 			</br>
 			<div>
-				<a href="faq.php" class="<?php echo $btnClass; ?> faq-btn" title="FAQ" target="newwin"><span data-i18n="show_faq"></span> <?php echo $config['icons']['faq']; ?></a></br>
+				<a href="faq.php" class="<?php echo $btnClass; ?> faq-btn" title="FAQ" target="newwin"><span data-i18n="show_faq"></span> <i class="<?php echo $config['icons']['faq']; ?>"></i></a></br>
 				<a href="https://photoboothproject.github.io" class="<?php echo $btnClass; ?> wiki-btn"><span data-i18n="show_wiki"></span></a>
 			</div>
 			</form>
diff --git a/resources/lang/en.json b/resources/lang/en.json
index f6955522d..1882de5a9 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -478,11 +478,6 @@
   "manual:userinterface:icons_admin_save_success": "ToDo",
   "manual:userinterface:icons_admin_signout": "ToDo",
   "manual:userinterface:icons_chroma": "ToDo",
-  "manual:userinterface:icons_class_close": "ToDo",
-  "manual:userinterface:icons_class_password_toggle": "ToDo",
-  "manual:userinterface:icons_class_password_visibility": "ToDo",
-  "manual:userinterface:icons_class_slideshow_play": "ToDo",
-  "manual:userinterface:icons_class_slideshow_toggle": "ToDo",
   "manual:userinterface:icons_close": "ToDo",
   "manual:userinterface:icons_cups": "ToDo",
   "manual:userinterface:icons_date": "ToDo",
@@ -500,12 +495,16 @@
   "manual:userinterface:icons_mail_close": "ToDo",
   "manual:userinterface:icons_mail_submit": "ToDo",
   "manual:userinterface:icons_manual": "ToDo",
+  "manual:userinterface:icons_password_toggle": "ToDo",
+  "manual:userinterface:icons_password_visibility": "ToDo",
   "manual:userinterface:icons_print": "ToDo",
   "manual:userinterface:icons_qr": "ToDo",
   "manual:userinterface:icons_refresh": "ToDo",
   "manual:userinterface:icons_save": "ToDo",
   "manual:userinterface:icons_share": "ToDo",
   "manual:userinterface:icons_slideshow": "ToDo",
+  "manual:userinterface:icons_slideshow_play": "ToDo",
+  "manual:userinterface:icons_slideshow_toggle": "ToDo",
   "manual:userinterface:icons_spinner": "ToDo",
   "manual:userinterface:icons_take_collage": "ToDo",
   "manual:userinterface:icons_take_picture": "ToDo",
@@ -724,12 +723,7 @@
   "userinterface:icons_admin_save_success": "Save icon on success (admin panel)",
   "userinterface:icons_admin_signout": "Sign out icon (admin panel)",
   "userinterface:icons_chroma": "Chroma keying icon",
-  "userinterface:icons_class_close": "Close icon class",
-  "userinterface:icons_class_password_toggle": "Password visibility toggle icon classes",
-  "userinterface:icons_class_password_visibility": "Password visibility class",
-  "userinterface:icons_class_slideshow_play": "Slideshow play icon class",
-  "userinterface:icons_class_slideshow_toggle": "Slideshow toggle icon classes",
-  "userinterface:icons_close": "Close icon",
+  "userinterface:icons_close": "Close icon class",
   "userinterface:icons_cups": "CUPS icon",
   "userinterface:icons_date": "Date icon",
   "userinterface:icons_delete": "Delete icon",
@@ -746,12 +740,16 @@
   "userinterface:icons_mail_close": "Close mail icon",
   "userinterface:icons_mail_submit": "Submit mail icon",
   "userinterface:icons_manual": "Manual icon",
+  "userinterface:icons_password_toggle": "Password visibility toggle icon classes",
+  "userinterface:icons_password_visibility": "Password visibility class",
   "userinterface:icons_print": "Print icon",
   "userinterface:icons_qr": "QR icon",
   "userinterface:icons_refresh": "Refresh icon",
   "userinterface:icons_save": "Save icon",
   "userinterface:icons_share": "Share icon",
   "userinterface:icons_slideshow": "Slideshow icon",
+  "userinterface:icons_slideshow_play": "Slideshow play icon class",
+  "userinterface:icons_slideshow_toggle": "Slideshow toggle icon classes",
   "userinterface:icons_spinner": "Spinner icon",
   "userinterface:icons_take_collage": "Take collage icon",
   "userinterface:icons_take_picture": "Take picture icon",
diff --git a/slideshow/index.php b/slideshow/index.php
index d94de233a..8be9bf336 100644
--- a/slideshow/index.php
+++ b/slideshow/index.php
@@ -40,6 +40,7 @@
 	<link rel="stylesheet" href="../node_modules/normalize.css/normalize.css" />
 	<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.css" />
 	<link rel="stylesheet" href="../node_modules/material-icons/iconfont/material-icons.css">
+	<link rel="stylesheet" href="../node_modules/material-icons/css/material-icons.css">
 	<link rel="stylesheet" href="../resources/css/slideshow.css?v=<?php echo $config['photobooth']['version']; ?>" />
 	<?php if (is_file("../private/overrides.css")): ?>
 	<link rel="stylesheet" href="../private/overrides.css?v=<?php echo $config['photobooth']['version']; ?>" />
@@ -69,7 +70,7 @@
 			}
 			$dateObject = DateTime::createFromFormat('Ymd_His', substr($name, 0, strlen($name) - 4));
 			if ($dateObject) {
-				$date = $config['icons']['date'] . ' ' . $dateObject->format($config['gallery']['date_format']);
+				$date = '<i class="' . $config['icons']['date'] . '"></i> ' . $dateObject->format($config['gallery']['date_format']);
 			}
 		}
 
diff --git a/src/js/core.js b/src/js/core.js
index e8c3e8c68..4629f0cc5 100644
--- a/src/js/core.js
+++ b/src/js/core.js
@@ -639,7 +639,7 @@ const photoBooth = (function () {
 
                 photoboothTools.modal.close('#qrCode');
             })
-            .append(config.icons.close)
+            .append('<i class="' + config.icons.close + '"></i>')
             .css('float', 'right')
             .appendTo(body);
         $('<img src="api/qrcode.php?filename=' + filename + '" alt="qr code"/>')
@@ -1044,7 +1044,7 @@ const photoBooth = (function () {
         const submitButton = form.find('.btn');
 
         mailMessageForm.empty();
-        submitButton.html(config.icons.mail_submit);
+        submitButton.html('<i class="' + config.icons.mail_submit + '"></i>');
 
         $.ajax({
             url: 'api/sendPic.php',
diff --git a/src/js/gallery.js b/src/js/gallery.js
index 884d7f7a3..f4d634883 100644
--- a/src/js/gallery.js
+++ b/src/js/gallery.js
@@ -1,7 +1,7 @@
 /* globals photoBooth photoboothTools */
 $(function () {
     const reloadElement = $('<a class="btn btn--' + config.ui.button + ' gallery__reload rotaryfocus">');
-    reloadElement.append(config.icons.refresh);
+    reloadElement.append('<i class="' + config.icons.refresh + '"></i>');
     reloadElement.attr('href', '#');
     reloadElement.on('click', () => photoboothTools.reloadPage());
     reloadElement.appendTo('.gallery__header');
diff --git a/src/js/login.js b/src/js/login.js
index 3e0bf5aa2..74040c690 100644
--- a/src/js/login.js
+++ b/src/js/login.js
@@ -12,5 +12,5 @@ function showPassword() {
 
 $('.password-toggle').on('click', function () {
     showPassword();
-    $('.password-toggle').toggleClass(config.icons_class.password_toggle);
+    $('.password-toggle').toggleClass(config.icons.password_toggle);
 });
diff --git a/src/js/photoinit.js b/src/js/photoinit.js
index 1a58e2e6b..d6e54c87b 100644
--- a/src/js/photoinit.js
+++ b/src/js/photoinit.js
@@ -181,7 +181,7 @@ function initPhotoSwipeFromDOM(gallerySelector) {
         const stopSlideshow = function () {
             if (ssRunning) {
                 setSlideshowState(ssButtonClass, false);
-                $('.pswp__button--playpause').toggleClass(config.icons_class.slideshow_toggle);
+                $('.pswp__button--playpause').toggleClass(config.icons.slideshow_toggle);
             }
         };
 
@@ -260,7 +260,7 @@ function initPhotoSwipeFromDOM(gallerySelector) {
                     ev.stopPropagation();
                     $('.pswp__qr').empty().removeClass('qr-active').fadeOut('fast');
                 })
-                .append(config.icons.close)
+                .append('<i class="' + config.icons.close + '"></i>')
                 .css('float', 'right')
                 .appendTo(pswpQR);
             $('<img>')
@@ -329,7 +329,7 @@ function initPhotoSwipeFromDOM(gallerySelector) {
         e.preventDefault();
         e.stopPropagation();
         // toggle slideshow on/off
-        $('.pswp__button--playpause').toggleClass(config.icons_class.slideshow_toggle);
+        $('.pswp__button--playpause').toggleClass(config.icons.slideshow_toggle);
         setSlideshowState(this, !ssRunning);
     });
 
diff --git a/template/classic.template.php b/template/classic.template.php
index 5f0a01228..556d73452 100644
--- a/template/classic.template.php
+++ b/template/classic.template.php
@@ -1,7 +1,7 @@
 		<!-- Start Page -->
 		<div class="stages <?php echo $uiShape; ?> rotarygroup noborder" id="start">
 			<?php if ($config['gallery']['enabled']): ?>
-			<a class="<?php echo $btnClass; ?> gallery-button rotaryfocus" href="#"><?php echo $config['icons']['gallery']; ?> <span data-i18n="gallery"></span></a>
+			<a class="<?php echo $btnClass; ?> gallery-button rotaryfocus" href="#"><i class="<?php echo $config['icons']['gallery']; ?>"></i> <span data-i18n="gallery"></span></a>
 			<?php endif; ?>
 
 			<div class="startInner <?php echo $uiShape; ?> noborder">
@@ -56,11 +56,11 @@
 				</div>
 				<?php else: ?>
 					<?php if (!($config['collage']['enabled'] && $config['collage']['only'])): ?>
-					<a href="#" class="<?php echo $btnClass; ?> takePic rotaryfocus"><?php echo $config['icons']['take_picture']; ?> <span data-i18n="takePhoto"></span></a>
+					<a href="#" class="<?php echo $btnClass; ?> takePic rotaryfocus"><i class="<?php echo $config['icons']['take_picture']; ?>"></i> <span data-i18n="takePhoto"></span></a>
 					<?php endif; ?>
 
 					<?php if ($config['collage']['enabled']): ?>
-					<a href="#" class="<?php echo $btnClass; ?> takeCollage rotaryfocus"><?php echo $config['icons']['take_collage']; ?> <span
+					<a href="#" class="<?php echo $btnClass; ?> takeCollage rotaryfocus"><i class="<?php echo $config['icons']['take_collage']; ?>"></i> <span
 							data-i18n="takeCollage"></span></a>
 					<?php endif; ?>
 
@@ -75,9 +75,9 @@
 			<?php endif; ?>
 
 			<?php if($config['button']['show_cups']): ?>
-				<a id="cups-button" class="<?php echo $btnClass; ?>  cups-button rotaryfocus" href="#" target="newwin"><?php echo $config['icons']['cups']; ?> <span>CUPS</span></a>
+				<a id="cups-button" class="<?php echo $btnClass; ?>  cups-button rotaryfocus" href="#" target="newwin"><i class="<?php echo $config['icons']['cups']; ?>"></i> <span>CUPS</span></a>
 			<?php endif; ?>
 			<?php if($config['button']['show_fs']): ?>
-				<a href="#" id="fs-button" class="<?php echo $btnClass; ?> btn--small fs-button"><?php echo $config['icons']['fullscreen']; ?> <span data-i18n="toggleFullscreen"></span></a>
+				<a href="#" id="fs-button" class="<?php echo $btnClass; ?> btn--small fs-button"><i class="<?php echo $config['icons']['fullscreen']; ?>"></i> <span data-i18n="toggleFullscreen"></span></a>
 			<?php endif; ?>
 		</div>
diff --git a/template/gallery.template.php b/template/gallery.template.php
index 95f84a1a2..6c38177e8 100644
--- a/template/gallery.template.php
+++ b/template/gallery.template.php
@@ -2,7 +2,7 @@
 	<div class="gallery__inner">
 		<div class="gallery__header">
 			<h1><span data-i18n="gallery"></span></h1>
-			<a href="#" class="<?php echo $btnClass; ?> gallery__close close_gal rotaryfocus"><?php echo $config['icons']['close']; ?></a>
+			<a href="#" class="<?php echo $btnClass; ?> gallery__close close_gal rotaryfocus"><i class="<?php echo $config['icons']['close']; ?>"></i></a>
 		</div>
 		<div class="gallery__body" id="galimages">
 			<?php if (empty($imagelist)): ?>
@@ -20,7 +20,7 @@
                 }
                 $dateObject = DateTime::createFromFormat('Ymd_His', substr($name, 0, strlen($name) - 4));
                 if ($dateObject) {
-                    $date = $config['icons']['date'] . ' ' . $dateObject->format($config['gallery']['date_format']);
+                    $date = '<i class="' . $config['icons']['date'] . '"></i> ' . $dateObject->format($config['gallery']['date_format']);
                 }
             }
 
@@ -57,11 +57,11 @@
                     </div>
                 <?php else: ?>
                     <?php if (!($config['collage']['enabled'] && $config['collage']['only'])): ?>
-                    <a href="#" class="<?php echo $btnClass; ?> gal-action-btn takePic rotaryfocus"><?php echo $config['icons']['take_picture']; ?> <span data-i18n="takePhoto"></span></a>
+                    <a href="#" class="<?php echo $btnClass; ?> gal-action-btn takePic rotaryfocus"><i class="<?php echo $config['icons']['take_picture']; ?>"></i> <span data-i18n="takePhoto"></span></a>
                     <?php endif; ?>
 
                     <?php if ($config['collage']['enabled']): ?>
-                    <a href="#" class="<?php echo $btnClass; ?> gal-action-btn takeCollage rotaryfocus"><?php echo $config['icons']['take_collage']; ?> <span data-i18n="takeCollage"></span></a>
+                    <a href="#" class="<?php echo $btnClass; ?> gal-action-btn takeCollage rotaryfocus"><i class="<?php echo $config['icons']['take_collage']; ?>"></i> <span data-i18n="takeCollage"></span></a>
                     <?php endif; ?>
                 <?php endif; ?>
             </div>
diff --git a/template/modern.template.php b/template/modern.template.php
index bd483a9bd..b4acd7446 100644
--- a/template/modern.template.php
+++ b/template/modern.template.php
@@ -51,7 +51,7 @@
 							<?php endif; ?>
 							<div class="rotarygroup">
 							<?php if($config['button']['show_cups']): ?>
-							<a id="cups-button" class="<?php echo $btnClass; ?> cups-button rotaryfocus" href="#" target="newwin"><?php echo $config['icons']['cups']; ?> <span>CUPS</span></a>
+							<a id="cups-button" class="<?php echo $btnClass; ?> cups-button rotaryfocus" href="#" target="newwin"><i class="<?php echo $config['icons']['cups']; ?>"></i> <span>CUPS</span></a>
 							<?php endif; ?>
 
 							<?php if ($config['button']['force_buzzer']): ?>
@@ -60,19 +60,19 @@
 								</div>
 							<?php else: ?>
 								<?php if (!($config['collage']['enabled'] && $config['collage']['only'])): ?>
-								<a href="#" class="<?php echo $btnClass; ?> takePic rotaryfocus"><?php echo $config['icons']['take_picture']; ?> <span data-i18n="takePhoto"></span></a>
+								<a href="#" class="<?php echo $btnClass; ?> takePic rotaryfocus"><i class="<?php echo $config['icons']['take_picture']; ?>"></i> <span data-i18n="takePhoto"></span></a>
 								<?php endif; ?>
 
 								<?php if ($config['collage']['enabled']): ?>
-								<a href="#" class="<?php echo $btnClass; ?> takeCollage rotaryfocus"><?php echo $config['icons']['take_collage']; ?> <span data-i18n="takeCollage"></span></a>
+								<a href="#" class="<?php echo $btnClass; ?> takeCollage rotaryfocus"><i class="<?php echo $config['icons']['take_collage']; ?>"></i> <span data-i18n="takeCollage"></span></a>
 								<?php endif; ?>
 							<?php endif; ?>
 
 							<?php if ($config['gallery']['enabled']): ?>
-							<a href="#" class="<?php echo $btnClass; ?> gallery-button rotaryfocus"><?php echo $config['icons']['gallery']; ?> <span data-i18n="gallery"></span></a>
+							<a href="#" class="<?php echo $btnClass; ?> gallery-button rotaryfocus"><i class="<?php echo $config['icons']['gallery']; ?>"></i> <span data-i18n="gallery"></span></a>
 							<?php endif; ?>
 							<?php if($config['button']['show_fs']): ?>
-							<a href="#" id="fs-button" class="<?php echo $btnClass; ?> fs-button"><?php echo $config['icons']['fullscreen']; ?> <span data-i18n="toggleFullscreen"></span></a>
+							<a href="#" id="fs-button" class="<?php echo $btnClass; ?> fs-button"><i class="<?php echo $config['icons']['fullscreen']; ?>"></i> <span data-i18n="toggleFullscreen"></span></a>
 							<?php endif; ?>
 							</div>
 						</div>
diff --git a/template/pswp.template.php b/template/pswp.template.php
index 1926eb68c..8b3ed6cd8 100644
--- a/template/pswp.template.php
+++ b/template/pswp.template.php
@@ -24,39 +24,39 @@
 
                 <div class="pswp__counter"></div>
 
-                <button class="<?php echo $btnClass; ?> pswp__button pswp__button--close <?php echo $config['icons_class']['close']; ?> rotaryfocus" title="Close (Esc)"></button>
-                <button class="pswp__button pswp__button--share rotaryfocus" title="Share"><?php echo $config['icons']['share']; ?></button>
-                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"><?php echo $config['icons']['fullscreen']; ?></button>
-                <button class="pswp__button pswp__button--zoom rotaryfocus" title="Zoom in/out"><?php echo $config['icons']['zoop']; ?></button>
+                <button class="<?php echo $btnClass; ?> pswp__button pswp__button--close <?php echo $config['icons']['close']; ?> rotaryfocus" title="Close (Esc)"></button>
+                <button class="pswp__button pswp__button--share rotaryfocus" title="Share"><i class="<?php echo $config['icons']['share']; ?>"></i></button>
+                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"><i class="<?php echo $config['icons']['fullscreen']; ?>"></i></button>
+                <button class="pswp__button pswp__button--zoom rotaryfocus" title="Zoom in/out"><i class="<?php echo $config['icons']['zoop']; ?>"></i></button>
 
                 <!-- custom buttons: -->
                 <?php if ($config['mail']['enabled']): ?>
-                <button type="button" class="pswp__button pswp__button--mail rotaryfocus" title="Send Email"><?php echo $config['icons']['mail']; ?></button>
+                <button type="button" class="pswp__button pswp__button--mail rotaryfocus" title="Send Email"><i class="<?php echo $config['icons']['mail']; ?>"></i></button>
                 <?php endif; ?>
 
                 <?php if ($config['print']['from_gallery']): ?>
-                <button type="button" class="pswp__button pswp__button--print rotaryfocus" title="Print"><?php echo $config['icons']['print']; ?></button>
+                <button type="button" class="pswp__button pswp__button--print rotaryfocus" title="Print"><i class="<?php echo $config['icons']['print']; ?>"></i></button>
                 <?php endif; ?>
 
                 <?php if ($config['qr']['enabled']): ?>
-                <button type="button" class="pswp__button pswp__button--qrcode rotaryfocus" title="QR Code"><?php echo $config['icons']['qr']; ?></button>
+                <button type="button" class="pswp__button pswp__button--qrcode rotaryfocus" title="QR Code"><i class="<?php echo $config['icons']['qr']; ?>"></i></button>
                 <?php endif; ?>
 
                 <?php if ($config['download']['enabled'] && ($_SERVER['REMOTE_ADDR'] !== $_SERVER['SERVER_ADDR'])): ?>
-                <!-- <button type="button" class="pswp__button pswp__button--download" title="Download"><?php echo $config['icons']['download']; ?></button> -->
-                <a href="" download="" class="pswp__button pswp__button--custom-download rotaryfocus" title="Download"><?php echo $config['icons']['download']; ?></a>
+                <!-- <button type="button" class="pswp__button pswp__button--download" title="Download"><i class="<?php echo $config['icons']['download']; ?>"></i></button> -->
+                <a href="" download="" class="pswp__button pswp__button--custom-download rotaryfocus" title="Download"><i class="<?php echo $config['icons']['download']; ?>"></i></a>
                 <?php endif; ?>
 
                 <?php if ($config['keying']['enabled']): ?>
-                <button type="button" class="pswp__button pswp__button--print-chroma-keying rotaryfocus" title="Chroma Key"><?php echo $config['icons']['chroma']; ?></button>
+                <button type="button" class="pswp__button pswp__button--print-chroma-keying rotaryfocus" title="Chroma Key"><i class="<?php echo $config['icons']['chroma']; ?>"></i></button>
                 <?php endif; ?>
 
                 <?php if ($config['gallery']['use_slideshow']): ?>
-                <button type="button" class="pswp__button pswp__button--playpause <?php echo $config['icons_class']['slideshow_play']; ?> rotaryfocus" title="Play Slideshow"></button>
+                <button type="button" class="pswp__button pswp__button--playpause <?php echo $config['icons']['slideshow_play']; ?> rotaryfocus" title="Play Slideshow"></button>
                 <?php endif; ?>
 
                 <?php if ($config['gallery']['allow_delete']): ?>
-                <button type="button" class="pswp__button pswp__button--delete <?php if ($config['delete']['no_request']){ echo 'rotaryfocus';} ?> " title="Delete"><?php echo $config['icons']['delete']; ?></button>
+                <button type="button" class="pswp__button pswp__button--delete <?php if ($config['delete']['no_request']){ echo 'rotaryfocus';} ?> " title="Delete"><i class="<?php echo $config['icons']['delete']; ?>"></i></button>
                 <?php endif; ?>
 
                 <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
diff --git a/template/send-mail.template.php b/template/send-mail.template.php
index bf6cfee1e..b92092bf2 100644
--- a/template/send-mail.template.php
+++ b/template/send-mail.template.php
@@ -1,5 +1,5 @@
 	<div class="<?php echo $uiShape; ?> send-mail">
-		<?php echo $config['icons']['mail_close'] ?>
+		<i class="<?php echo $config['icons']['mail_close'] ?>" id="send-mail-close"></i>
 		<?php if ($config['mail']['send_all_later']): ?>
 		    <p data-i18n="insertMailToDB"></p>
 		<?php else: ?>
diff --git a/test/preview.php b/test/preview.php
index fcc6e2472..ad2af34b5 100644
--- a/test/preview.php
+++ b/test/preview.php
@@ -31,6 +31,7 @@
     <link rel="stylesheet" href="../node_modules/normalize.css/normalize.css"/>
     <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.css"/>
     <link rel="stylesheet" href="../node_modules/material-icons/iconfont/material-icons.css">
+    <link rel="stylesheet" href="../node_modules/material-icons/css/material-icons.css">
     <link rel="stylesheet" href="../resources/css/test_preview.css?v=<?php echo $config['photobooth']['version']; ?>"/>
     <?php if (is_file('../private/overrides.css')): ?>
         <link rel="stylesheet" href="../private/overrides.css?v=<?php echo $config['photobooth']['version']; ?>"/>
diff --git a/trigger.php b/trigger.php
index 3ae682794..cd78d57b8 100644
--- a/trigger.php
+++ b/trigger.php
@@ -31,6 +31,7 @@
 	<link rel="stylesheet" href="node_modules/normalize.css/normalize.css" />
 	<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css" />
 	<link rel="stylesheet" href="node_modules/material-icons/iconfont/material-icons.css">
+	<link rel="stylesheet" href="node_modules/material-icons/css/material-icons.css">
 	<link rel="stylesheet" href="resources/css/<?php echo $config['ui']['style']; ?>_style.css" />
 	<link rel="stylesheet" href="resources/css/trigger.css" />
 	<?php if (is_file("private/overrides.css")): ?>
@@ -43,11 +44,11 @@
     <div id="wrapper">
 		<div class="buttonbar">
 			<?php if (!$config['collage']['only']): ?>
-			<a href="#" class="<?php echo $btnClass; ?> remotePicture" onclick="photoboothTools.getRequest('http://' + config.webserver.ip + ':' + config.remotebuzzer.port + '/commands/start-picture');"><?php echo $config['icons']['take_picture'] ?> <span data-i18n="takePhoto"></span></a>
+			<a href="#" class="<?php echo $btnClass; ?> remotePicture" onclick="photoboothTools.getRequest('http://' + config.webserver.ip + ':' + config.remotebuzzer.port + '/commands/start-picture');"><i class="<?php echo $config['icons']['take_picture'] ?>"></i> <span data-i18n="takePhoto"></span></a>
 			<?php endif; ?>
 
 			<?php if ($config['collage']['enabled']): ?>
-			<a href="#" class="<?php echo $btnClass; ?> remoteCollage" onclick="photoboothTools.getRequest('http://' + config.webserver.ip + ':' + config.remotebuzzer.port + '/commands/start-collage');"><?php echo $config['icons']['take_collage'] ?> <span data-i18n="takeCollage"></span></a>
+			<a href="#" class="<?php echo $btnClass; ?> remoteCollage" onclick="photoboothTools.getRequest('http://' + config.webserver.ip + ':' + config.remotebuzzer.port + '/commands/start-collage');"><i class="<?php echo $config['icons']['take_collage'] ?>"></i> <span data-i18n="takeCollage"></span></a>
 			<?php endif; ?>
 		</div>
 	</div>
diff --git a/update.php b/update.php
index 896ec24f2..b5354dff0 100644
--- a/update.php
+++ b/update.php
@@ -46,6 +46,7 @@
 	<link rel="stylesheet" href="node_modules/normalize.css/normalize.css" />
 	<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css" />
 	<link rel="stylesheet" href="node_modules/material-icons/iconfont/material-icons.css">
+	<link rel="stylesheet" href="node_modules/material-icons/css/material-icons.css">
 	<link rel="stylesheet" href="resources/css/<?php echo $config['ui']['style']; ?>_style.css?v=<?php echo $config['photobooth']['version']; ?>" />
 	<link rel="stylesheet" href="resources/css/update.css?v=<?php echo $config['photobooth']['version']; ?>" />
 	<?php if (is_file("private/overrides.css")): ?>
@@ -60,16 +61,16 @@
 		<p><span data-i18n="os_check"></span></p>
 	</div>
 
-	<a href="#" class="gitCommit <?php echo $btnClass; ?>"><?php echo $config['icons']['update_git'] ?> <span data-i18n="update_git_commit"></span></a>
+	<a href="#" class="gitCommit <?php echo $btnClass; ?>"><i class="<?php echo $config['icons']['update_git'] ?>"></i> <span data-i18n="update_git_commit"></span></a>
 
-	<a href="#" class="updateDev <?php echo $btnClass; ?>"><?php echo $config['icons']['update_git'] ?> <span data-i18n="update_to_dev"></span></a>
+	<a href="#" class="updateDev <?php echo $btnClass; ?>"><i class="<?php echo $config['icons']['update_git'] ?>"></i> <span data-i18n="update_to_dev"></span></a>
 
-	<a href="#" class="updateStable <?php echo $btnClass; ?>"><?php echo $config['icons']['update_git'] ?> <span data-i18n="update_to_stable"></span></a>
+	<a href="#" class="updateStable <?php echo $btnClass; ?>"><i class="<?php echo $config['icons']['update_git'] ?>"></i> <span data-i18n="update_to_stable"></span></a>
 
 	<div>
-		<a href="./" class="btn <?php echo $btnShape; ?>"><?php echo $config['icons']['home'] ?> <span data-i18n="home"></span></a>
+		<a href="./" class="btn <?php echo $btnShape; ?>"><i class="<?php echo $config['icons']['home'] ?>"></i> <span data-i18n="home"></span></a>
 
-		<a href="admin" class="btn <?php echo $btnShape; ?>"><?php echo $config['icons']['admin'] ?> <span data-i18n="admin_panel"></span></a>
+		<a href="admin" class="btn <?php echo $btnShape; ?>"><i class="<?php echo $config['icons']['admin'] ?>"></i> <span data-i18n="admin_panel"></span></a>
 	</div>
 
 	<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
diff --git a/welcome.php b/welcome.php
index 06d0e0b8a..e3a1ab156 100644
--- a/welcome.php
+++ b/welcome.php
@@ -39,6 +39,7 @@
 	<link rel="stylesheet" href="node_modules/normalize.css/normalize.css" />
 	<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css" />
 	<link rel="stylesheet" href="node_modules/material-icons/iconfont/material-icons.css">
+	<link rel="stylesheet" href="node_modules/material-icons/css/material-icons.css">
 	<link rel="stylesheet" href="resources/css/welcome.css?v=<?php echo $config['photobooth']['version']; ?>" />
 	<?php if (is_file("private/overrides.css")): ?>
 	<link rel="stylesheet" href="private/overrides.css?v=<?php echo $config['photobooth']['version']; ?>" />