custom icon

src/ArticleCard.tsx

@@ -1,5 +1,5 @@
-import { createStyles, Card, Image, Stack, Text, Group, Flex, rem } from '@mantine/core';
-import { IconCurrentLocation } from '@tabler/icons-react';
+import { createStyles, Card, Image, Stack, Text, Group, Flex } from '@mantine/core';
+import globe from './assets/globe.png'
 
 
 const useStyles = createStyles((theme) => ({
@@ -19,8 +19,8 @@ const useStyles = createStyles((theme) => ({
 
   address: {
     "&:hover": {
-      color: "red",
-      cursor: "pointer"
+      cursor: "pointer",
+      filter: "invert(54%) sepia(72%) saturate(4528%) hue-rotate(164deg) brightness(98%) contrast(101%)"
     }
   }
 }));
@@ -61,8 +61,8 @@ export function ArticleCardVertical({
             {title}
           </Text>
           <Flex align='center' onClick={() => handleAddressClick(id)} className={classes.address}>
-            <IconCurrentLocation style={{ width: rem(12), height: rem(12) }} />
-            {/* <IconArrowLeft style={{ width: rem(12), height: rem(12) }} /> */}
+            {/* <IconCurrentLocation style={{ width: rem(12), height: rem(12) }} /> */}
+            <Image src={globe} style={{ width: 32, height: 32 }} />
             <Text size="xs" pl={5} pb={2}>
               {address}
             </Text>