From 7be774b71dbe9a496c5cbce7beba7cf80c36512d Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Wed, 7 Jul 2021 17:29:05 +0200
Subject: [PATCH] Dashboard: Add ability to use IPL Icons (#4429)

---
 .../views/scripts/navigation/dashboard.phtml        | 13 ++++++++++++-
 public/css/icinga/widgets.less                      |  6 ++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/application/views/scripts/navigation/dashboard.phtml b/application/views/scripts/navigation/dashboard.phtml
index d9b2c6441..f06988227 100644
--- a/application/views/scripts/navigation/dashboard.phtml
+++ b/application/views/scripts/navigation/dashboard.phtml
@@ -1,3 +1,8 @@
+<?php
+
+use ipl\Web\Widget\Icon;
+
+?>
 <div class="controls">
     <?= $tabs ?>
 </div>
@@ -5,7 +10,13 @@
     <?php foreach ($navigation as $item): /** @var \Icinga\Web\Navigation\NavigationItem $item */?>
     <a class="dashboard-link" href="<?= $this->url($item->getUrl(), $item->getUrlParameters()) ?>"<?= $this->propertiesToString($item->getAttributes()) ?>>
         <div class="link-icon">
-            <?= $this->icon($item->getIcon() ?: 'forward', null, array('aria-hidden' => true)) ?>
+        <?php
+            if (substr($item->getUrl()->getPath(), 0, 9) === 'icingadb/') {
+                echo new Icon($item->getIcon(), [ 'aria-hidden' => 1]);
+            } else {
+                echo $this->icon($item->getIcon() ?: 'forward', null, array('aria-hidden' => true));
+            }
+        ?>
         </div>
         <div class="link-meta">
             <div class="link-label"><?= $this->escape($item->getLabel()) ?></div>
diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less
index f79b1114b..a68ea78b7 100644
--- a/public/css/icinga/widgets.less
+++ b/public/css/icinga/widgets.less
@@ -125,10 +125,16 @@
   display: table-cell;
   padding-right: .5em;
   vertical-align: middle;
+  text-align: center;
 
   > i {
     font-size: 3em;
     opacity: 0.7;
+    line-height: 1.5;
+
+    &:before {
+      min-width: 1.25em;
+    }
   }
 
   > img {