About TextField with a small icon

I want to code a TextField component with icon. So the behavior is as follow:

• If the TextField contains an empty string, I use "lens.png".


• Otherwise, i use "cross.png".

using the JavaFX Scene Builder, I added a TextFiled and an ImageView in the stack pane. My code is the following:

    @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 -> {
            final String text = textSearch.getText();
            Image icon = (text == null) ? lensIcon : crossIcon;
            imageView.setImage(icon);
            imageView.setMouseTransparent(icon == lensIcon);
        }
        );
        imageView.setOnMouseClicked(evt -> textSearch.setText(null));

my issue is the following: How to prevent writing caracters below the icon (ImageView). the following figure illustrate my issue.