Keep showing search icon while typing search query

This adds an option to the TextField element to show an icon on the left side in the text field. The icon remains visible when the user types in something (it's not part of the placeholder string).
Then we use that optional icon for the search bar in the Digital Library.

Contributes to issue CURA-8009.

plugins/DigitalLibrary/resources/qml/SelectProjectPage.qml

@@ -51,12 +51,8 @@ Item
 
             onTextEdited: manager.projectFilter = text //Update the search filter when editing this text field.
 
-            placeholderText:
-            {
-                var image_size = "width=\"" + UM.Theme.getSize("small_button_icon").width + "\" height=\"" + UM.Theme.getSize("small_button_icon").height + "\" ";
-                var image_source = "src=\"" + UM.Theme.getIcon("Magnifier") + "\"";
-                return "<img align=\"middle\" " + image_size + image_source + "> &nbsp; Search";
-            }
+            leftIcon: UM.Theme.getIcon("Magnifier")
+            placeholderText: "Search"
         }
 
         Cura.SecondaryButton
@@ -106,6 +102,7 @@ Item
                 anchors.horizontalCenter: parent.horizontalCenter
                 text: searchBar.text === "" ? "It appears that you don't have any projects in the Library yet." : "No projects found that match the search query."
                 font: UM.Theme.getFont("medium")
+                color: UM.Theme.getColor("text")
             }
 
             Cura.TertiaryButton

resources/qml/Widgets/TextField.qml

@@ -15,6 +15,8 @@ TextField
 {
     id: textField
 
+    property alias leftIcon: iconLeft.source
+
     UM.I18nCatalog { id: catalog; name: "cura" }
 
     hoverEnabled: true
@@ -22,6 +24,7 @@ TextField
     font: UM.Theme.getFont("default")
     color: UM.Theme.getColor("text")
     renderType: Text.NativeRendering
+    leftPadding: iconLeft.visible ? iconLeft.width + UM.Theme.getSize("default_margin").width * 2 : UM.Theme.getSize("thin_margin")
 
     states: [
         State
@@ -67,5 +70,23 @@ TextField
             }
             return UM.Theme.getColor("setting_control_border")
         }
+
+        //Optional icon added on the left hand side.
+        UM.RecolorImage
+        {
+            id: iconLeft
+
+            anchors
+            {
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+                leftMargin: UM.Theme.getSize("default_margin").width
+            }
+
+            visible: source != ""
+            height: UM.Theme.getSize("small_button_icon").height
+            width: visible ? height : 0
+            color: textField.color
+        }
     }
 }