Dash, Folium and a Font Awesome Kit Conflict

Dash Python
1

Hi all,
I have the following code:

import pandas as pd 
import branca 
import folium 

# Import Dash and Dash Bootstrap Components
import dash
import dash_daq as daq
from dash import Input, Output, dcc, html, dash_table, callback
import dash_bootstrap_components as dbc




app = dash.Dash(__name__,title='CONFIRM - FÁTIMA 2022',suppress_callback_exceptions=True,update_title=None,
			meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}],
			)


app.css.config.serve_locally = False 
app.scripts.config.serve_locally = False 

server = app.server


app.layout = html.Div(
	children=[
	 	dcc.Interval(
            id='interval-component',
            interval=180 * 1000,  # in milliseconds , 20 seconds every refresh
            n_intervals=0
        ),
        html.Div(id='target'),
		
	]
)

@app.callback(Output('target', 'children'), [Input('interval-component', 'n_intervals')])


def embed_iframe(value):

	# Data Treatment

	df = pd.read_csv('https://docs.google.com/spreadsheets/d/e/2PACX-1vQzLHhweuUH0meMW0QfQrNCbat0Rw73fEBpBgKU-LQOlSqOTVQ0xMHhquDh-gAo9SNj50xbP1bULh87/pub?gid=617652868&single=true&output=csv')

	df = df.fillna('NO INFO')

	# Define Center 

	location = df['lat'].mean(), df['lon'].mean()

	# Design Popup 
	def popup_html(row):
		i = row
		name = df['entidade'].iloc[i]
		local = df['local'].iloc[i]
		address = df['morada'].iloc[i]
		hours = str(df['opening_hours'].iloc[i])
		person = str(df['person_in_charge'].iloc[i])
		contact_phone = str(df['mobile_contact'].iloc[i])
		institution_img="VOSTPT_Logotype.png"
		

		left_col_color = "#273B80"
		right_col_color = "#f2f9ff"

		html_popup = """
		<!DOCTYPE html>
		<html>
			
			<head>
          		<!-- Place your kit's code here -->
          		<script src="https://kit.fontawesome.com/3544964b82.js" crossorigin="anonymous"></script>
        	</head>
			<body>

				<center><h4 style="margin-bottom:5"; width="700px">{}</h4>""".format(name) + """</center>

				<center><img src=\"""" + institution_img + """\" alt="logo" width=50 height=50></center>

				<center><table style="height: 126px; width: 700px;"></center>

				<tbody>

					<tr>
					<td style="background-color: """+ left_col_color +""";"><span style="color: #ffffff;"><center>Morada</center></span></td>
					<td style="width: 350px;background-color: """+ right_col_color +""";">"""+ address + """</td>
					</tr>

					<tr>
					<td style="background-color: """+ left_col_color +""";"><span style="color: #ffffff;"><center>Local</center></span></td>
					<td style="width: 350px;background-color: """+ right_col_color +""";">"""+ local + """</td>
					</tr>

					<tr>
					<td style="background-color: """+ left_col_color +""";"><span style="color: #ffffff;"><center>Pessoa Responsável</center></span></td>
					<td style="width: 350px;background-color: """+ right_col_color +""";">"""+ person + """</td>
					</tr>

					<tr>
					<td style="background-color: """+ left_col_color +""";"><span style="color: #ffffff;"><center>Contacto</center></span></td>
					<td style="width: 400px;background-color: """+ right_col_color +""";">"""+ contact_phone + """</td>
					</tr>

			

					<tr>
					<td style="background-color: """+ left_col_color +""";"><span style="color: #ffffff;"><center>Horário</center></span></td>
					<td style="width: 400px;background-color: """+ right_col_color +""";">"""+ hours + """</td>
					<td style="width: 10px;background-color: """+ right_col_color +""";"><i class="fa-solid fa-at"></i></td>
					</tr>
				</tbody>
			</body>
		</html>
		"""
		return html_popup
	
	# Design Map 

	map_fatima = folium.Map(location=location,zoom_start=8)

	for i in range(0,len(df)):
			institution_type = df['entidade'].iloc[i]
			if institution_type == 'Movimento da Mensagem de Fátima':
				color = 'green'
				icon = 'info'
			elif institution_type == 'Ordem de Malta':
				color = 'red'
				icon = 'map-marker'
			else:
				color = 'gray'

			html_popup = popup_html(i)
			popup = folium.Popup(folium.Html(html_popup, script=True), max_width=700)
			folium.Marker([df['lat'].iloc[i],df['lon'].iloc[i]],
					popup=popup,icon=folium.Icon(color=color, icon=icon, prefix='fa')).add_to(map_fatima)

	out_map = "assets/map_fatima.html"
	map_fatima.save(out_map)

	return html.Iframe(
					src='assets/map_fatima.html',
					style={"width":"100%","height":"900px"}
				)





# -------------------------------------------------------------------------------------
# --------------------------------  START THE APP -------------------------------------
# -------------------------------------------------------------------------------------

if __name__ == "__main__":
	app.run_server(host='0.0.0.0', debug=True)

I’m running into this issue where if I delete the reference to the font-awesome kit script the map shows, and updates, with no problem. However the icons don’t show on the popup table.

As soon as I include the reference to the script, inside the html , the map does not render, and a list of the pop ups, including the icon, show as a list on the screen.

Any ideas how to sort this out?
Thank you in advance.

PS: If you think the popup can be done just using dbc elements, please let me know.

Disclaimer: this project is being developed by a non-profit NGO. No commercial use will be made from the solution provided here.