Unite icons (#1374)

## Launch Checklist

This removes the `@mdi` (material design icons) package and uses the
icons from `react-icons`.
The icons are not exactly the same, but have the same idea behind them.

 - [x] Briefly describe the changes in this PR.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

Main changes can be found below.
Before:
<img width="580" height="780" alt="image"
src="https://github.com/user-attachments/assets/e3d5fc8a-bd59-48fe-bdae-31bb290749c8"
/>


After:

<img width="580" height="780" alt="image"
src="https://github.com/user-attachments/assets/bacdbdba-9e73-4bef-bd30-26fe946269c1"
/>

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

src/components/FilterEditor.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import {mdiTableRowPlusAfter} from "@mdi/js";
+import { TbMathFunction } from "react-icons/tb";
+import { PiListPlusBold } from "react-icons/pi";
 import {isEqual} from "lodash";
 import {type ExpressionSpecification, type LegacyFilterSpecification} from "maplibre-gl";
 import {latest, migrate, convertFilter} from "@maplibre/maplibre-gl-style-spec";
-import {mdiFunctionVariant} from "@mdi/js";
 
 import {combiningFilterOps} from "../libs/filterops";
 import InputSelect from "./InputSelect";
@@ -198,9 +198,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
           onClick={this.makeExpression}
           title={t("Convert to expression")}
         >
-          <svg style={{marginRight: "0.2em", width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
-            <path fill="currentColor" d={mdiFunctionVariant} />
-          </svg>
+          <TbMathFunction />
           {t("Upgrade to expression")}
         </InputButton>
       </div>;
@@ -217,9 +215,7 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
             title={t("Convert to expression")}
             className="maputnik-make-zoom-function"
           >
-            <svg style={{width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
-              <path fill="currentColor" d={mdiFunctionVariant} />
-            </svg>
+            <TbMathFunction />
           </InputButton>
         </div>
       );
@@ -272,9 +268,8 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
               className="maputnik-add-filter"
               onClick={this.addFilterItem}
             >
-              <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
-                <path fill="currentColor" d={mdiTableRowPlusAfter} />
-              </svg> {t("Add filter")}
+              <PiListPlusBold style={{ verticalAlign: "text-bottom" }} />
+              {t("Add filter")}
             </InputButton>
           </div>
           <div

src/components/LayerEditorGroup.tsx

@@ -1,9 +1,5 @@
 import React from "react";
-import Icon from "@mdi/react";
-import {
-  mdiMenuDown,
-  mdiMenuUp
-} from "@mdi/js";
+import {MdArrowDropDown, MdArrowDropUp} from "react-icons/md";
 import {
   AccordionItem,
   AccordionItemHeading,
@@ -30,17 +26,9 @@ export default class LayerEditorGroup extends React.Component<LayerEditorGroupPr
         onClick={_e => this.props.onActiveToggle(!this.props.isActive)}
       >
         <AccordionItemButton className="maputnik-layer-editor-group__button">
-          <span style={{flexGrow: 1}}>{this.props.title}</span>
-          <Icon
-            path={mdiMenuUp}
-            size={1}
-            className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--up"
-          />
-          <Icon
-            path={mdiMenuDown}
-            size={1}
-            className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--down"
-          />
+          <span style={{flexGrow: 1, alignContent: "center"}}>{this.props.title}</span>
+          <MdArrowDropUp size={"2em"} className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--up"></MdArrowDropUp>
+          <MdArrowDropDown size={"2em"} className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--down"></MdArrowDropDown>
         </AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>

src/components/_DataProperty.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import {mdiFunctionVariant, mdiTableRowPlusAfter} from "@mdi/js";
+import {PiListPlusBold} from "react-icons/pi";
+import {TbMathFunction} from "react-icons/tb";
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 
 import InputButton from "./InputButton";
@@ -360,18 +361,16 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
                 className="maputnik-add-stop"
                 onClick={this.props.onAddStop?.bind(this)}
               >
-                <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
-                  <path fill="currentColor" d={mdiTableRowPlusAfter} />
-                </svg> {t("Add stop")}
+                <PiListPlusBold style={{ verticalAlign: "text-bottom" }} />
+                {t("Add stop")}
               </InputButton>
             }
             <InputButton
               className="maputnik-add-stop"
               onClick={this.props.onExpressionClick?.bind(this)}
             >
-              <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
-                <path fill="currentColor" d={mdiFunctionVariant} />
-              </svg> {t("Convert to expression")}
+              <TbMathFunction style={{ verticalAlign: "text-bottom" }} />
+              {t("Convert to expression")}
             </InputButton>
           </div>
         </div>

src/components/_FunctionButtons.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import InputButton from "./InputButton";
 import {MdFunctions, MdInsertChart} from "react-icons/md";
-import {mdiFunctionVariant} from "@mdi/js";
+import { TbMathFunction } from "react-icons/tb";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
 type FunctionInputButtonsInternalProps = {
@@ -24,9 +24,7 @@ class FunctionInputButtonsInternal extends React.Component<FunctionInputButtonsI
           onClick={this.props.onExpressionClick}
           title={t("Convert to expression")}
         >
-          <svg style={{width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
-            <path fill="currentColor" d={mdiFunctionVariant} />
-          </svg>
+          <TbMathFunction />
         </InputButton>
       );
 

src/components/_ZoomProperty.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import {mdiFunctionVariant, mdiTableRowPlusAfter} from "@mdi/js";
+import { PiListPlusBold } from "react-icons/pi";
+import { TbMathFunction } from "react-icons/tb";
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
@@ -233,17 +234,15 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
               className="maputnik-add-stop"
               onClick={this.props.onAddStop?.bind(this)}
             >
-              <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
-                <path fill="currentColor" d={mdiTableRowPlusAfter} />
-              </svg> {t("Add stop")}
+              <PiListPlusBold style={{ verticalAlign: "text-bottom" }} />
+              {t("Add stop")}
             </InputButton>
             <InputButton
               className="maputnik-add-stop"
               onClick={this.props.onExpressionClick?.bind(this)}
             >
-              <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
-                <path fill="currentColor" d={mdiFunctionVariant} />
-              </svg> {t("Convert to expression")}
+              <TbMathFunction style={{ verticalAlign: "text-bottom" }} />
+              {t("Convert to expression")}
             </InputButton>
           </div>
         </div>