Is it possible to change the button icon on a Gravity Forms custom field in the form editor?

Question

I am creating a custom field plugin for Gravity forms. I'm looking for a way to change the icon that displays in the form editor for the custom field. I have scowered the documentation, disected other plugins, and googled like crazy, and at the moment I have not found a way to change it. It's possible that there is no easy or built in way to override the icon, but I figured I'd ask the developer hivemind.

I am refering to this icon: Custom field icon in the form editor

Ideally I'd only change it if there's an override function or setting. I don't want to get crazy with JS selectors and css (unless is simple).

Any ideas? Thanks!

Answer 1

Hopefully you were able to figure this out on your project, but for those who come looking for answers. From Gravity Form's own GF_Field class:

    /**
     * Returns the field's form editor icon.
     *
     * This could be an icon url or a gform-icon class.
     *
     * @since 2.5
     *
     * @return string
     */
    public function get_form_editor_field_icon() {
        return 'gform-icon--cog';
    }

To extend this for your own customization you have 3 options for the return value:

1. Use get_form_editor_field_icon to return a font awesome/dashicons class, super easy, barely an inconvenience. (Gravity Forms Version 2.6.1 introduced icon_namespace with ability to specify and use custom font icon with the addition of GFAddOn::get_icon_namespace()).
2. Use get_form_editor_field_icon to return SVG (content) and it will render the SVG in place. You may need to do slight additional styling to set the SVG size correctly or it renders full width of the add field button.
3. Use get_form_editor_field_icon to return image path for your own custom icon.

Example of usage:

class Super_Awesome_Field_Type extends GF_Field {
  public $type = 'your_custom_field_type';
  
  /**
   * Returns the field's form editor icon.
   *
   * This could be an icon url or a gform-icon class.
   *
   * @since 2.5
   *
   * @return string
   */
  public function get_form_editor_field_icon() {
      // set your own custom value here
      return 'gform-icon--flag';
  }
  
  /**
   * Returns the field button properties for the form editor. The array contains two elements:
   * 'group' => 'standard_fields' // or  'advanced_fields', 'post_fields', 'pricing_fields'
   * 'text'  => 'Button text'
   *
   * Built-in fields don't need to implement this because the buttons are added in sequence in GFFormDetail
   *
   * @return array
   */
  public function get_form_editor_button() {
      return array(
          'group' => 'advanced_fields',
          'text'  => $this->get_form_editor_field_title(),
          // you could also manually just override in this method as well
          'icon'  => $this->get_form_editor_field_icon(),
          'description' => $this->get_form_editor_field_description()
      );
  }
  
}

For those looking to dive into the code, this is used within get_icon_markup of common.php to render.