From 622fe45692974058778427ee4430b3d722dd2819 Mon Sep 17 00:00:00 2001
From: Hans Then <hans.then@gmail.com>
Date: Sat, 15 Mar 2025 11:23:52 +0100
Subject: [PATCH] Add links parameter

so we can use new stylesheets. This is useful if we
want to include google material icons in out buttons.
---
 st_aggrid/AgGrid.py               |  6 ++++++
 st_aggrid/frontend/src/AgGrid.tsx | 20 ++++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/st_aggrid/AgGrid.py b/st_aggrid/AgGrid.py
index c0c278b..0116c71 100644
--- a/st_aggrid/AgGrid.py
+++ b/st_aggrid/AgGrid.py
@@ -157,6 +157,7 @@ def AgGrid(
     columns_state=None,
     theme: str | StAggridTheme = "streamlit",
     custom_css=None,
+    links: typing.List[str] = None,
     key: typing.Any = None,
     update_on=[],
     **default_column_parameters,
@@ -280,6 +281,9 @@ def AgGrid(
     custom_css (dict, optional):
         Custom CSS rules to be added to the component's iframe.
 
+    links : typing.List[str], optional
+         List of URLs to external stylesheets (e.g. FontAwesome, Material Icons) to be loaded in the component.
+
     key : typing.Any, optional
         Streamlits key argument. Check streamlit's documentation.
         Defaults to None.
@@ -366,6 +370,7 @@ def AgGrid(
         try_to_convert_back_to_original_types = False
 
     custom_css = custom_css or dict()
+    links = links or []
 
     if height == None:
         gridOptions["domLayout"] = "autoHeight"
@@ -398,6 +403,7 @@ def AgGrid(
             columns_state=columns_state,
             theme=themeObj,
             custom_css=custom_css,
+            links=links,
             update_on=update_on,
             manual_update=manual_update,
             key=key,
diff --git a/st_aggrid/frontend/src/AgGrid.tsx b/st_aggrid/frontend/src/AgGrid.tsx
index bae60b8..6f3c4d6 100644
--- a/st_aggrid/frontend/src/AgGrid.tsx
+++ b/st_aggrid/frontend/src/AgGrid.tsx
@@ -37,6 +37,23 @@ import { themeBalham } from 'ag-grid-community'
 
 type CSSDict = { [key: string]: { [key: string]: string } }
 
+interface CustomStylesheetProps {
+  url: string;
+}
+ 
+function CustomStylesheet({ url }: CustomStylesheetProps) {
+  React.useEffect(() => {
+    const link = document.createElement('link');
+    link.href = url;
+    link.rel = 'stylesheet';
+    document.head.appendChild(link);
+    return () => {
+      document.head.removeChild(link);
+    };
+  }, [url]);
+  return null;
+}
+
 function getCSS(styles: CSSDict): string {
   var css = []
   for (let selector in styles) {
@@ -494,6 +511,9 @@ class AgGrid extends React.Component<ComponentProps, State> {
         ref={this.gridContainerRef}
         style={this.defineContainerHeight()}
       >
+        {this.props.args.links?.map((url: string) => (
+          <CustomStylesheet key={url} url={url} />
+        ))}
         <GridToolBar enabled={shouldRenderGridToolbar}>
           <ManualUpdateButton
             manualUpdate={this.props.args.manual_update}