Default icon for Elementor button widgets

Elementor allows you to define default styles, in the Site Settings panel.
Unfortunately it does not allow you to define a default icon for buttons. So if your design includes an icon in all buttons, you will have to define them in the settings of each widget. Boring.

Below are two functions that allow you to set a default icon for all widgets.

The first one adds new settings to Site Settings > Buttons:

• a default icon
• the default position of the icon (before or after)
• the default spacing of the icon

The second one updates the default settings for all Buttons, with the values defined in Site Settings.

You can place this code in the functions.php file of your theme or a custom plugin.

Note that this will update all the Buttons which do not have an icon, already present in your pages, and not only the new ones.

<?php

add_action( 'elementor/element/kit/section_buttons/after_section_end', 'prefix_add_site_setting_button_icon', 10, 2 );
/**
 * Add Site setting for button default Icon
 * 
 * @param $element Element_Widget The edited element.
 * @param $args The $args that sent to $element->after_section_end
 */
function prefix_add_site_setting_button_icon( $element, $args ) {
	$element->start_injection([
        'at' => 'after',
        'of' => 'button_padding',
    ]);
    
    $element->add_control(
    	'button_icon',
    	[
    		'label' => __( 'Default icon', 'elementor' ),
    		'type' => \Elementor\Controls_Manager::ICONS,
    		'fa4compatibility' => 'icon',
    		'skin' => 'inline',
    		'separator' => 'before',
    	]
    );

    $element->add_control(
    	'button_icon_align',
    	[
    		'label' => __( 'Icon Position', 'elementor' ),
    		'type' => Controls_Manager::SELECT,
    		'default' => 'left',
    		'options' => [
    			'left' => __( 'Before', 'elementor' ),
    			'right' => __( 'After', 'elementor' ),
    		],
    		'condition' => [
    			'button_icon[value]!' => '',
    		],
    	]
    );

    $element->add_control(
    	'button_icon_indent',
    	[
    		'label' => __( 'Icon Spacing', 'elementor' ),
    		'type' => Controls_Manager::SLIDER,
    		'range' => [
    			'px' => [
    				'max' => 50,
    			],
    		]
    	]
    );

    $element->end_injection();
}

add_action( 'elementor/element/button/section_button/before_section_end', 'prefix_default_button_icon', 10, 2 );
/**
 * Set default icon for button widget
 * 
 * @param $element Element_Widget The edited element.
 * @param $args The $args that sent to $element->before_section_end
 */
function prefix_default_button_icon( $element, $args ) {

	$elementor_active_kit = get_option( 'elementor_active_kit', $default = false );

	if ( ! $elementor_active_kit ) {
		return;
	}
	// get Active kit post meta (settings)
	$active_kit_settings = get_post_meta( $elementor_active_kit, '_elementor_page_settings', $single = true );
	if ( $active_kit_settings ) {
		if ( isset( $active_kit_settings[ 'button_icon' ] ) && is_array( $active_kit_settings[ 'button_icon' ] ) ) {
			// Set default values for buttons icon
			$element->update_control(
				'selected_icon',
				[
					'default' => $active_kit_settings[ 'button_icon' ]
				]
			);
		}
		if ( isset( $active_kit_settings[ 'button_icon_align' ] ) && ! empty( $active_kit_settings[ 'button_icon_align' ] ) ) {
			// Set default value for buttons icon
			$element->update_control(
				'icon_align',
				[
					'default' => $active_kit_settings[ 'button_icon_align' ]
				]
			);
		}
		if ( isset( $active_kit_settings[ 'button_icon_indent' ] ) && ! empty( $active_kit_settings[ 'button_icon_indent' ] ) ) {
			// Set default value for buttons icon
			$element->update_control(
				'icon_indent',
				[
					'default' => $active_kit_settings[ 'button_icon_indent' ]
				]
			);
		}
	}		
}
Code language: HTML, XML (xml)