title: Changing the drop down indicator image on a JavaFX MenuButton?
body: <p>In my application I am using a <code>MenuButton</code> to provide a drop down list of actions. The default drop down indicator on a <code>MenuButton</code> is a black triangle pointing down. I want to change that to a white triangle pointing down to match the color of my text. </p>
  
  <p>Just in case I am not being clear, here is a screen shot that should clear it up.</p>
  
  <p><img src="https://i.stack.imgur.com/zadFh.png" alt="black triangle"></p>
  
  <p>I have tried placing a graphic in the fxml file like so:</p>
  
  <pre><code>&lt;MenuButton contentDisplay="RIGHT" graphicTextGap="10.0" layoutX="92.0" layoutY="73.0" mnemonicParsing="false" styleClass="toolbar-button" text="MenuButton"&gt;
    &lt;graphic&gt;
      &lt;ImageView fitHeight="4.0" fitWidth="7.0" mouseTransparent="true" preserveRatio="true"&gt;
        &lt;image&gt;
          &lt;Image url="@Arrow_Down.png" preserveRatio="true" smooth="false" /&gt;
        &lt;/image&gt;
      &lt;/ImageView&gt;
    &lt;/graphic&gt;
    &lt;items&gt;
      &lt;MenuItem mnemonicParsing="false" text="Action 1" /&gt;
      &lt;MenuItem mnemonicParsing="false" text="Action 2" /&gt;
    &lt;/items&gt;
  &lt;/MenuButton&gt;
  </code></pre>
  
  <p>but that gives me both a black and white triangle:</p>
  
  <p><img src="https://i.stack.imgur.com/ba2Bv.png" alt="white and black triangle">  </p>
  
  <p>If I could somehow hide the black triangle that would work, but it sure seems like there should be a way to style the menu button for it to be white instead.</p>
  
  <p>Here is Sample.fxml for those wanting to help:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;?import java.lang.*?&gt;
  &lt;?import java.net.*?&gt;
  &lt;?import javafx.scene.*?&gt;
  &lt;?import javafx.scene.control.*?&gt;
  &lt;?import javafx.scene.image.*?&gt;
  &lt;?import javafx.scene.layout.*?&gt;
  
  &lt;AnchorPane id="AnchorPane" prefHeight="200.0" prefWidth="320.0" xmlns:fx="http://javafx.com/fxml"&gt;
    &lt;children&gt;
      &lt;MenuButton contentDisplay="RIGHT" graphicTextGap="10.0" layoutX="92.0" layoutY="73.0" mnemonicParsing="false" styleClass="toolbar-button" text="MenuButton"&gt;
        &lt;graphic&gt;
          &lt;ImageView fitHeight="4.0" fitWidth="7.0" mouseTransparent="true" preserveRatio="true"&gt;
            &lt;image&gt;
              &lt;Image url="@Arrow_Down.png" preserveRatio="true" smooth="false" /&gt;
            &lt;/image&gt;
          &lt;/ImageView&gt;
        &lt;/graphic&gt;
        &lt;items&gt;
          &lt;MenuItem mnemonicParsing="false" text="Action 1" /&gt;
          &lt;MenuItem mnemonicParsing="false" text="Action 2" /&gt;
        &lt;/items&gt;
      &lt;/MenuButton&gt;
    &lt;/children&gt;
    &lt;stylesheets&gt;
      &lt;URL value="@test.css" /&gt;
    &lt;/stylesheets&gt;
  &lt;/AnchorPane&gt;
  </code></pre>
  
  <p>The test.css:</p>
  
  <pre><code>root { 
      display: block;
  }
  
  .toolbar-button {
      -fx-background-color: #006699;
      -fx-padding: 2 4 4 4;
      -fx-text-base-color: #FFFFFF;
      -fx-font-weight: bold;
      -fx-font-size: 12px;
  }
  
  .toolbar-button:hover {
      -fx-background-color: #B2E1FF;
      -fx-padding: 2 4 4 4;
      -fx-text-base-color: #000000;
      -fx-font-weight: bold;
      -fx-font-size: 12px;
  }
  </code></pre>
  
  <p>And the Test.java to run it:</p>
  
  <pre><code>package test;
  
  import javafx.application.Application;
  import javafx.fxml.FXMLLoader;
  import javafx.scene.Parent;
  import javafx.scene.Scene;
  import javafx.stage.Stage;
  
  public class Test extends Application {
  
      public static void main(String[] args) {
          Application.launch(Test.class, args);
      }
  
      @Override
      public void start(Stage stage) throws Exception {
          Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml"));
  
          stage.setScene(new Scene(root));
          stage.show();
      }
  }
  </code></pre>
  
  <p><strong>So how do I make the black triangle a white triangle?</strong></p>