Flexible Content Preview Pop Up

admin.js

const imagePath = theme_var.upload

document.addEventListener("DOMContentLoaded", function(event) {
	setUpModalHTML()
})


function setUpModalHTML(){
	const modalView =  document.createElement("div")
	modalView.id = "abw_modalview"
	modalView.className = "aw_hidden"

	const modalImgElt = document.createElement("img")
	modalImgElt.id = "abw_modal_image"
	modalView.appendChild(modalImgElt)

	const initButton = document.querySelector('.acf-flexible-content > .acf-actions .acf-button.button-primary')

	initButton.addEventListener("click", () => {
		setTimeout(() => {
	  	setUpModalEvents(modalView, modalImgElt)
		}, 100)
	})

	initSmallAddModuleButtons(modalView, modalImgElt)
}

function setUpModalEvents(modalView, modalImgElt) {
	const moduleItems = document.querySelectorAll('.acf-fc-popup li a')
	const acfModuleMenu = document.querySelector('.acf-tooltip.acf-fc-popup')

	acfModuleMenu.appendChild(modalView)

	moduleItems.forEach( el => {
		// Preload Image for better performance
		const fileName = el.dataset.layout
		modalImgElt.src = imagePath + fileName + '.svg'

		el.addEventListener('mouseenter', () => {
			modalImgElt.src = imagePath + fileName + '.svg'

			if (modalImgElt.complete) {
				modalView.classList.toggle('aw_hidden', false)
			}
		})

		el.addEventListener('mouseleave', () => {
			modalView.classList.toggle('aw_hidden', true)
		})

		// Re-run initSmallAddModuleButtons() function to add Previews to new generated Flex Elements
		el.addEventListener('click', () => {
			setTimeout(() => {
				initSmallAddModuleButtons(modalView, modalImgElt)
			}, 100)
		})
	})
}


function initSmallAddModuleButtons(modalView, modalImgElt) {
	const initButtonsSmall = document.querySelectorAll('.acf-fc-layout-controls .acf-icon.-plus.small')

	initButtonsSmall.forEach( btn => {
		btn.addEventListener("click", () => {
			setTimeout(() => {
				setUpModalEvents(modalView, modalImgElt)
			}, 100)
		})
	})
}

admin.scss

.aw_hidden {
  display: none !important;
}

// ACF Module Preview
#abw_modalview {
  position: absolute;
  left: 0;
  bottom: 0px;
  transform: translateX(-100%);
  margin-right: 0px;
  width: 400px;
  height: 400px;
  border-radius: 20px;
  box-shadow: 0 0 1rem 0rem rgba(0, 0, 0, 0.2);

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.acf-actions .acf-button.button.button-primary {
  position: relative;
}


// ACF Module Menu
.acf-fc-popup li a,
.acf-fc-popup li a:before {
  line-height: 1em;
  vertical-align: top;
}

.acf-fc-popup li a:before {
  content: '';
  display: inline-block;
  background-image: url('/wp-content/themes/abw_brief/images/acf-icons/hero_header.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  width: 1.4rem;
  height: 1em;
}

// Place Icons Code here
.acf-fc-popup [data-layout="hero_header"]:before {
  background-image: url('/wp-content/themes/abw_brief/images/acf-icons/hero_header.svg');
}

functions.php

// REGISTER CSS & JS
add_action( 'admin_enqueue_scripts', 'acf_flexible_content_thumbnail' );
function acf_flexible_content_thumbnail() {
    
	// REGISTER ADMIN.CSS
	wp_enqueue_style( 'css-theme-admin', get_template_directory_uri() . '/css/admin.css', false, 1.0 );

	// REGISTER ADMIN.JS
	wp_register_script( 'js-theme-admin', get_template_directory_uri() . '/js/admin.js', array('jquery'), 1.0, true );	
	wp_localize_script( 'js-theme-admin', 'theme_var',
                array(
                    'upload' => get_template_directory_uri().'/img/acf-thumbnail/',
                )
	);
	wp_enqueue_script( 'js-theme-admin');
	
}

Added Icon Support for the ACF popup. Admin.js is vanilla JS.