Replace search icon png with fontawesome icon

application/views/scripts/layout/menu.phtml

@@ -8,6 +8,7 @@ $searchDashboard->setUser($this->Auth()->getUser());
 
 if ($searchDashboard->search('dummy')->getPane('search')->hasDashlets()): ?>
     <form action="<?= $this->href('search') ?>" method="get" role="search" class="search-control">
+        <i class="icon fa-search fa search-icon"></i>
         <input type="text" name="q" id="search" class="search search-input" required
                placeholder="<?= $this->translate('Search') ?> &hellip;"
                autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">

library/Icinga/Web/Widget/FilterEditor.php

@@ -3,17 +3,17 @@
 
 namespace Icinga\Web\Widget;
 
+use Exception;
+use Icinga\Application\Icinga;
+use Icinga\Data\Filter\Filter;
+use Icinga\Data\Filter\FilterChain;
+use Icinga\Data\Filter\FilterExpression;
+use Icinga\Data\Filter\FilterOr;
 use Icinga\Data\Filterable;
 use Icinga\Data\FilterColumns;
-use Icinga\Data\Filter\Filter;
-use Icinga\Data\Filter\FilterExpression;
-use Icinga\Data\Filter\FilterChain;
-use Icinga\Data\Filter\FilterOr;
-use Icinga\Web\Url;
-use Icinga\Application\Icinga;
 use Icinga\Exception\ProgrammingError;
 use Icinga\Web\Notification;
-use Exception;
+use Icinga\Web\Url;
 
 /**
  * Filter
@@ -738,7 +738,8 @@ class FilterEditor extends AbstractWidget
 
         $html = ' <form method="post" class="search inline" action="'
             . $preservedUrl
-              . '"><input type="text" name="q" class="search search-input" value="" placeholder="'
+            . '"><i class="icon fa-search fa search-icon"></i>'
+            . '<input type="text" name="q" class="search search-input" value="" placeholder="'
             . t('Search...')
             . '" /></form>';
 

library/Icinga/Web/Widget/SingleValueSearchControl.php

@@ -10,6 +10,7 @@ use ipl\Html\FormElement\InputElement;
 use ipl\Html\HtmlElement;
 use ipl\Web\Control\SearchBar\Suggestions;
 use ipl\Web\Url;
+use ipl\Web\Widget\Icon;
 
 class SingleValueSearchControl extends Form
 {
@@ -106,6 +107,8 @@ class SingleValueSearchControl extends Form
     {
         $suggestionsId = Icinga::app()->getRequest()->protectId('single-value-suggestions');
 
+        $this->addHtml(new Icon('search', Attributes::create(['class' => 'search-icon'])));
+
         $this->addElement(
             'text',
             $this->searchParameter,

public/css/icinga/controls.less

@@ -21,35 +21,35 @@
   }
 }
 
+form > .search-icon {
+  position: absolute;
+  left: 0.25em;
+  top: ~"calc(50% - 0.5em)";
+  pointer-events: none;
+  color: @menu-color;
+  opacity: 0.8;
+}
+
+form:has(> .search-icon) {
+  position: relative;
+}
+
 .controls input.search,
 input.search {
   .transition(border 0.3s ease);
-  .transition(background-image 0.2s ease);
 
-  background-image: url(../img/icons/search_white.png);
-  background-repeat: no-repeat;
-  background-size: 1em 1em;
-  background-position: .25em center;
   outline: none;
   padding-left: 1.5em;
   width: 20em;
 
-  &:focus {
-    background-image: url(../img/icons/search_icinga_blue.png);
-  }
-
   &:focus:not([readonly]) {
     border-color: @icinga-blue;
   }
 }
 
-@light-mode: {
+form:has(input.search:focus) > .search-icon {
-  #menu input.search,
+  color: @icinga-blue;
-  .controls input.search,
-  input.search {
-    background-image: url(../img/icons/search.png);
 }
-};
 
 .backend-selection,
 .pagination-control,

public/css/icinga/menu.less

@@ -210,9 +210,12 @@
   opacity: .6;
 }
 
+#menu .search-icon {
+  left: 1em;
+}
+
 #menu input.search {
-  background: transparent url('../img/icons/search_white.png') no-repeat 1em center;
+  background-color: @menu-bg-color;
-  background-size: 1em auto;
   border: none;
   color: @menu-color;
   line-height: 2.167em;