Icon Control

The icon control lets you select and output icons from the following icon font libraries:

• Fontawesome 5
• Ionicons 4
• Themify

class Prefix_Element_Icon extends BricksElement {
  // Set builder controls
  public function set_controls() {
    $this->controls['exampleIcon'] = [
      'tab' => 'content',
      'label' => esc_html__( 'Gradient', 'bricks' ),
      'type' => 'icon',
      'default' => [
        'library' => 'themify', // fontawesome/ionicons/themify
        'icon' => 'ti-star',    // Example: Themify icon class
      ],
    ];
  }

  // Render element HTML
  public function render() {
    // Set icon 'class' attribute
    if ( isset( $this->settings['exampleIcon']['icon'] ) ) {
      $this->set_attribute( 'icon', 'class', [
        'icon',
        $this->settings['exampleIcon']['icon']
      ] );

      echo '<i ' . $this->render_attributes( 'icon' ) . '></i>';
    }
  }
}

To include SVG icons please use the SVG Control.