Fontawesome V6

docs/source/tutorials/add-tile.rst

@@ -135,7 +135,7 @@ in the :code:`app_items` list, add a :code:`DrawerItem` corresponding to your ti
         # [...]
         sw.DrawerItem(
             title = ms.app.drawer_item.aoi, 
-            icon 'fas fa-cogs',  # optional
+            icon 'fa-solid fa-cogs',  # optional
             card="my_tile"
         )
     ]

docs/source/tutorials/custom-widget.rst

@@ -69,7 +69,7 @@ Here we will create the object with its expected attributes
         def __init__(self, label="Password", **kwargs):
 
             # create the eye icon
-            self.eye = v.Icon(class_ = 'ml-1', children=['fas fa-eye'])
+            self.eye = v.Icon(class_ = 'ml-1', children=['fa-solid fa-eye'])
 
             # create the texfied 
             self.text_field = v.TextField(
@@ -123,7 +123,7 @@ Toggle visibility
 
 Now we want to add a behavior to our object. When we click on the eye, the :code:`PasswordField` should toggle its visibility: 
 
-* The eye should switch from :code:`fas fa-eye` and :code:`fas fa-eye-slash`
+* The eye should switch from :code:`fa-solid fa-eye` and :code:`fa-solid fa-eye-slash`
 * The text_field should switch from type :code:`password` to :code:`text`
 
 To do so we will first add 2 class static variable (caps lock) to list the 2 types and icon and set them on the two attributes of my class. a new attribute needs to be created to remind the current state of the password. 
@@ -138,7 +138,7 @@ I'll call it :code:`password_viz` as the :code:`viz` parameter is already an att
 
     class PasswordField(sw.SepalWidget, v.Layout):
 
-        EYE_ICONS = ['fas fa-eye', 'fas fa-eye-slash'] # new icon list
+        EYE_ICONS = ['fa-solid fa-eye', 'fa-solid fa-eye-slash'] # new icon list
         TYPES = ['password', 'text'] # new type list
 
         def __init__(self, label="Password", **kwargs):
@@ -224,7 +224,7 @@ finally we obtain the following reusable widget :
 
     class PasswordField(sw.SepalWidget, v.Layout):
 
-        EYE_ICONS = ['fas fa-eye', 'fas fa-eye-slash'] # new icon list
+        EYE_ICONS = ['fa-solid fa-eye', 'fa-solid fa-eye-slash'] # new icon list
         TYPES = ['password', 'text'] # new type list
 
         def __init__(self, label="Password", **kwargs):

docs/source/widgets/btn.rst

@@ -5,7 +5,7 @@ Overview
 --------
 
 :code:`Btn` is custom widget to provide easy to use button in the sepal_ui framework. it inherits from the :code:`SepalWidget` class.
-Any argument from the original :code:`Btn` ipyvuetify class can be used to complement it. The button icon needs to be searched in the `fontAwesome library <https://fontawesome.com/v5.15/icons>`__ or mdi library <https://materialdesignicons.com>`_, if none is set, a :code:`fas fa-check` will be used.
+Any argument from the original :code:`Btn` ipyvuetify class can be used to complement it. The button icon needs to be searched in the `fontAwesome library <https://fontawesome.com/icons>`__ or mdi library <https://materialdesignicons.com>`_, if none is set, a :code:`fa-solid fa-check` will be used.
 The default color is set to "primary".  
 
 .. jupyter-execute:: 
@@ -21,7 +21,7 @@ The default color is set to "primary".
 
     btn = sw.Btn(
         msg = "The One btn",
-        gliph = "fas fa-cogs"
+        gliph = "fa-solid fa-cogs"
     )
     btn
 
@@ -43,7 +43,7 @@ Btn can be used to launch function on any Javascript event such as "click".
 
     btn = sw.Btn(
         msg = "The One btn",
-        gliph = "fas fa-cogs"
+        gliph = "fa-solid fa-cogs"
     )
     btn.on_event('click', lambda *args: print('Hello world!'))
 

sepal_ui/frontend/json/file_icons.json

@@ -1,12 +1,12 @@
 {
-    "": {"color": ["#ffca28", "#ffc107"], "icon": "far fa-folder"},
-    ".csv": {"color": ["#4caf50", "#00c853"], "icon": "far fa-table"},
-    ".txt": {"color": ["#4caf50", "#00c853"], "icon": "far fa-table"},
-    ".tif": {"color": ["#9c27b0", "#673ab7"], "icon": "far fa-image"},
+    "": {"color": ["#ffca28", "#ffc107"], "icon": "fa-regular fa-folder"},
+    ".csv": {"color": ["#4caf50", "#00c853"], "icon": "fa-solid fa-table"},
+    ".txt": {"color": ["#4caf50", "#00c853"], "icon": "fa-solid fa-table"},
+    ".tif": {"color": ["#9c27b0", "#673ab7"], "icon": "fa-regular fa-image"},
     ".tiff": {"color": ["#9c27b0", "#673ab7"], "icon": "far fa-image"},
-    ".vrt": {"color": ["#9c27b0", "#673ab7"], "icon": "far fa-image"},
-    ".shp": {"color": ["#9c27b0", "#673ab7"], "icon": "far fa-vector-square"},
-    ".geojson": {"color": ["#9c27b0", "#673ab7"], "icon": "far fa-vector-square"},
-    "DEFAULT": {"color": ["#00bcd4", "#03a9f4"], "icon": "far fa-file"},
-    "PARENT": {"color": ["#424242", "#ffffff"], "icon": "far fa-folder-open"}
+    ".vrt": {"color": ["#9c27b0", "#673ab7"], "icon": "fa-regular fa-image"},
+    ".shp": {"color": ["#9c27b0", "#673ab7"], "icon": "fa-solid fa-vector-square"},
+    ".geojson": {"color": ["#9c27b0", "#673ab7"], "icon": "fa-solid fa-vector-square"},
+    "DEFAULT": {"color": ["#00bcd4", "#03a9f4"], "icon": "fa-regular fa-file"},
+    "PARENT": {"color": ["#424242", "#ffffff"], "icon": "fa-regular fa-folder-open"}
 }

sepal_ui/frontend/styles.py

@@ -153,9 +153,11 @@ class Styles(v.VuetifyTemplate):
     """
 
     css = (CSS_DIR / "custom.css").read_text()
-    cdn = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+    cdn = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
+    key = "sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
     template = Unicode(
-        f'<style>{css}</style><link rel="stylesheet" href="{cdn}"/>'
+        f"<style>{css}</style>"
+        f'<link rel="stylesheet" href="{cdn}" integrity="{key}" crossorigin="anonymous", refferpolicy="no-referrer"/>'
     ).tag(sync=True)
     "Unicode: the trait embeding the maps style"
 

sepal_ui/mapping/aoi_control.py

@@ -36,7 +36,7 @@ def __init__(self, m, **kwargs):
         self.aoi_list = sw.ListItemGroup(children=[], v_model="")
 
         # create the widget
-        super().__init__("fas fa-search-location", self.aoi_list, **kwargs)
+        super().__init__("fa-solid fa-search-location", self.aoi_list, **kwargs)
 
         # change a bit the behavior of the control
         self.menu.open_on_hover = True

sepal_ui/mapping/fullscreen_control.py

@@ -23,7 +23,7 @@ class FullScreenControl(WidgetControl):
         kwargs (optional): any available arguments from a ipyleaflet WidgetControl
     """
 
-    ICONS = ["fas fa-expand", "fas fa-compress"]
+    ICONS = ["fa-solid fa-expand", "fa-solid fa-compress"]
     "list: The icons that will be used to toggle between expand and compressed mode"
 
     METHODS = ["embed", "fullscreen"]

sepal_ui/mapping/map_btn.py

@@ -14,13 +14,13 @@ class MapBtn(v.Btn, sw.SepalWidget):
     The MapBtn is responsive to theme changes. It only accept icon or 3 letters as children as the space is very limited.
 
     Args:
-        content (str): a fas/mdi fully qualified name or a string name. If a string name is used, only the 3 first letters will be displayed.
+        content (str): a fa-solid/mdi fully qualified name or a string name. If a string name is used, only the 3 first letters will be displayed.
     """
 
     def __init__(self, content, **kwargs):
 
         # create the icon
-        if content.startswith("mdi-") or content.startswith("fas fa-"):
+        if content.startswith("mdi-") or content.startswith("fa-solid fa-"):
             content = sw.Icon(small=True, children=[content])
         else:
             content = content[: min(3, len(content))].upper()

sepal_ui/mapping/value_inspector.py

@@ -58,7 +58,7 @@ def __init__(self, m, **kwargs):
         self.text = sw.CardText(children=[ms.v_inspector.landing])
 
         # create the menu widget
-        super().__init__("fas fa-crosshairs", self.text, title, **kwargs)
+        super().__init__("fa-solid fa-crosshairs", self.text, title, **kwargs)
 
         # adapt the size
         self.set_size(min_height=0)

sepal_ui/reclassify/reclassify_view.py

@@ -490,20 +490,26 @@ def __init__(
         self.save_dialog = SaveMatrixDialog(folder=out_path)
         self.import_dialog = ImportMatrixDialog(folder=out_path)
         self.get_table = sw.Btn(
-            msg=ms.rec.rec.input.btn, gliph="far fa-table", color="success", small=True
+            msg=ms.rec.rec.input.btn,
+            gliph="fa-solid fa-table",
+            color="success",
+            small=True,
         )
         self.import_table = sw.Btn(
             msg="import",
-            gliph="fas fa-download",
+            gliph="fa-solid fa-download",
             color="secondary",
             small=True,
             class_="ml-2 mr-2",
         )
         self.save_table = sw.Btn(
-            msg="save", gliph="fas fa-save", color="secondary", small=True
+            msg="save", gliph="fa-solid fa-save", color="secondary", small=True
         )
         self.reclassify_btn = sw.Btn(
-            msg=ms.rec.rec.btn, gliph="fas fa-chess-board", small=True, disabled=True
+            msg=ms.rec.rec.btn,
+            gliph="fa-solid fa-chess-board",
+            small=True,
+            disabled=True,
         )
 
         self.toolbar = v.Toolbar(

sepal_ui/reclassify/table_view.py

@@ -51,22 +51,25 @@ def __init__(self, out_path=Path.home() / "downloads", **kwargs):
         # and set them in the top slot of the table
         self.edit_btn = sw.Btn(
             msg=ms.rec.table.btn.edit,
-            gliph="fas fa-pencil-alt",
+            gliph="fa-solid fa-pencil-alt",
             class_="ml-2 mr-2",
             color="secondary",
             small=True,
         )
         self.delete_btn = sw.Btn(
             msg=ms.rec.table.btn.delete,
-            gliph="fas fa-trash-alt",
+            gliph="fa-solid fa-trash-alt",
             color="error",
             small=True,
         )
         self.add_btn = sw.Btn(
-            msg=ms.rec.table.btn.add, gliph="fas fa-plus", color="success", small=True
+            msg=ms.rec.table.btn.add,
+            gliph="fa-solid fa-plus",
+            color="success",
+            small=True,
         )
         self.save_btn = sw.Btn(
-            msg=ms.rec.table.btn.save, gliph="far fa-save", small=True
+            msg=ms.rec.table.btn.save, gliph="fa-regular fa-save", small=True
         )
 
         slot = v.Toolbar(

sepal_ui/sepalwidgets/app.py

@@ -54,7 +54,9 @@ def __init__(self, title="SEPAL module", translator=None, **kwargs):
 
         self.toggle_button = v.Btn(
             icon=True,
-            children=[v.Icon(class_="white--text", children=["fas fa-ellipsis-v"])],
+            children=[
+                v.Icon(class_="white--text", children=["fa-solid fa-ellipsis-v"])
+            ],
         )
 
         self.title = v.ToolbarTitle(children=[title])
@@ -132,7 +134,7 @@ def __init__(
         # set the resizetrigger
         self.rt = rt
 
-        icon = icon if icon else "far fa-folder"
+        icon = icon if icon else "fa-regular fa-folder"
 
         children = [
             v.ListItemAction(children=[v.Icon(class_="white--text", children=[icon])]),
@@ -160,7 +162,9 @@ def __init__(
         # cannot be set as a class member because it will be shared with all
         # the other draweritems.
         self.alert_badge = v.ListItemAction(
-            children=[v.Icon(children=["fas fa-circle"], x_small=True, color="red")]
+            children=[
+                v.Icon(children=["fa-solid fa-circle"], x_small=True, color="red")
+            ]
         )
 
         if model:
@@ -255,17 +259,17 @@ def __init__(self, items=[], code=None, wiki=None, issue=None, **kwargs):
         code_link = []
         if code:
             item_code = DrawerItem(
-                ms.widgets.navdrawer.code, icon="far fa-file-code", href=code
+                ms.widgets.navdrawer.code, icon="fa-regular fa-file-code", href=code
             )
             code_link.append(item_code)
         if wiki:
             item_wiki = DrawerItem(
-                ms.widgets.navdrawer.wiki, icon="fas fa-book-open", href=wiki
+                ms.widgets.navdrawer.wiki, icon="fa-solid fa-book-open", href=wiki
             )
             code_link.append(item_wiki)
         if issue:
             item_bug = DrawerItem(
-                ms.widgets.navdrawer.bug, icon="fas fa-bug", href=issue
+                ms.widgets.navdrawer.bug, icon="fa-solid fa-bug", href=issue
             )
             code_link.append(item_bug)
 
@@ -699,7 +703,7 @@ class ThemeSelect(v.Btn, SepalWidget):
         kwargs (dict, optional): any arguments for a Btn object, children and v_model will be override
     """
 
-    THEME_ICONS = {"dark": "fas fa-moon", "light": "fas fa-sun"}
+    THEME_ICONS = {"dark": "fa-solid fa-moon", "light": "fa-solid fa-sun"}
     "dict: the dictionnry of icons to use for each theme (used as keys)"
 
     theme = "dark"

sepal_ui/sepalwidgets/btn.py

@@ -135,7 +135,7 @@ class DownloadBtn(v.Btn, SepalWidget):
     def __init__(self, text, path="#", **kwargs):
 
         # create a download icon
-        v_icon = v.Icon(left=True, children=["fas fa-download"])
+        v_icon = v.Icon(left=True, children=["fa-solid fa-download"])
 
         # set default parameters
         kwargs["class_"] = kwargs.pop("class_", "ma-2")

sepal_ui/sepalwidgets/inputs.py

@@ -256,18 +256,25 @@ def __init__(
                     "name": "activator",
                     "variable": "x",
                     "children": Btn(
-                        gliph="fas fa-search", v_model=False, v_on="x.on", msg=label
+                        gliph="fa-solid fa-search",
+                        v_model=False,
+                        v_on="x.on",
+                        msg=label,
                     ),
                 }
             ],
         )
 
         self.reload = v.Btn(
-            icon=True, color="primary", children=[v.Icon(children=["fas fa-sync-alt"])]
+            icon=True,
+            color="primary",
+            children=[v.Icon(children=["fa-solid fa-sync-alt"])],
         )
 
         self.clear = v.Btn(
-            icon=True, color="primary", children=[v.Icon(children=["fas fa-times"])]
+            icon=True,
+            color="primary",
+            children=[v.Icon(children=["fa-solid fa-times"])],
         )
         if not clearable:
             su.hide_component(self.clear)

sepal_ui/sepalwidgets/widget.py

@@ -66,7 +66,7 @@ def __init__(self, **kwargs):
         kwargs["outlined"] = kwargs.pop("outlined", True)
         kwargs["label"] = kwargs.pop("label", "Copy To clipboard")
         kwargs["readonly"] = kwargs.pop("readonly", True)
-        kwargs["append_icon"] = kwargs.pop("append_icon", "fas fa-clipboard")
+        kwargs["append_icon"] = kwargs.pop("append_icon", "fa-solid fa-clipboard")
         kwargs["v_model"] = kwargs.pop("v_model", None)
         kwargs["class_"] = kwargs.pop("class_", "ma-5")
 
@@ -102,7 +102,7 @@ def __init__(self, **kwargs):
 
     def _clip(self, widget, event, data):
         self.send({"method": "clip", "args": [self.tf.v_model]})
-        self.tf.append_icon = "fas fa-clipboard-check"
+        self.tf.append_icon = "fa-solid fa-clipboard-check"
 
         return
 
@@ -142,7 +142,9 @@ def __init__(self, model=None, model_trait=None, states=None, **kwargs):
         # Get the first value (states first key) to use as default one
         init_value = self.states[next(iter(self.states))]
 
-        self.icon = v.Icon(children=["fas fa-circle"], color=init_value[1], small=True)
+        self.icon = v.Icon(
+            children=["fa-solid fa-circle"], color=init_value[1], small=True
+        )
 
         super().__init__(self.icon, init_value[0], **kwargs)
 

sepal_ui/templates/map_app/component/tile/map_tile.py

@@ -21,7 +21,7 @@ def __init__(self):
     def set_code(self, link):
         "add the code link btn to the map"
 
-        btn = sm.MapBtn("fas fa-code", href=link, target="_blank")
+        btn = sm.MapBtn("fa-solid fa-code", href=link, target="_blank")
         control = WidgetControl(widget=btn, position="bottomleft")
         self.m.add(control)
 
@@ -30,7 +30,7 @@ def set_code(self, link):
     def set_wiki(self, link):
         "add the wiki link btn to the map"
 
-        btn = sm.MapBtn("fas fa-book-open", href=link, target="_blank")
+        btn = sm.MapBtn("fa-solid fa-book-open", href=link, target="_blank")
         control = WidgetControl(widget=btn, position="bottomleft")
         self.m.add(control)
 
@@ -39,7 +39,7 @@ def set_wiki(self, link):
     def set_issue(self, link):
         "add the code link btn to the map"
 
-        btn = sm.MapBtn("fas fa-bug", href=link, target="_blank")
+        btn = sm.MapBtn("fa-solid fa-bug", href=link, target="_blank")
         control = WidgetControl(widget=btn, position="bottomleft")
         self.m.add(control)
 

sepal_ui/templates/panel_app/ui.ipynb

@@ -55,7 +55,7 @@
     "# create a drawer for each group of tile\n",
     "# fmt: off\n",
     "items = [\n",
-    "    sw.DrawerItem(cm.app.drawer_item.about, \"fas fa-question-circle\", card=\"about_tile\"),\n",
+    "    sw.DrawerItem(cm.app.drawer_item.about, \"fa-solid fa-question-circle\", card=\"about_tile\"),\n",
     "]\n",
     "# fmt: on\n",
     "\n",