title: About TextField with a small icon
body: <p>I want to code a TextField component with icon.
  So the behavior is as follow:</p>
  
  <ul>
  <li>If the TextField  contains an empty string, I use "lens.png".</li>
  <li>Otherwise, i use "cross.png".</li>
  </ul>
  
  <p>using the JavaFX Scene Builder, I added a TextFiled and an ImageView in the stack pane.
  My code is the following:</p>
  
  <pre><code>    @FXML
      private TextField textSearch;
      @FXML
      private ImageView imageView;
      final Image lensIcon = new Image("/issue/images/lens.png");
      final Image crossIcon = new Image("/issue/images/cross.png");
  
      //initialize () method 
       textSearch.textProperty().addListener(obs -&gt; {
              final String text = textSearch.getText();
              Image icon = (text==null || text.isEmpty()) ? lensIcon : crossIcon;
              imageView.setImage(icon);
              imageView.setMouseTransparent(icon == lensIcon);
          }
          );
          imageView.setOnMouseClicked(evt -&gt; textSearch.setText(null));
  </code></pre>
  
  <p>my issue is the following:
  How to prevent writing caracters below the icon (ImageView). the following figure illustrate my issue.</p>
  
  <p><img src="https://i.stack.imgur.com/SEq8M.jpg" alt="enter image description here"></p>