Icons to categories added. Categories section done

src/components/Categories/Categories.jsx

@@ -5,6 +5,8 @@ import { AlmacenateLanguage } from "../Scripts/AlmacenateLanguage"
 import Bring_All_Categories from "./Firebase Querys/Bring All Categories"
 import Bring_All_Languages from "./Firebase Querys/Bring All Languages"
 
+import images from "./Images"
+
 
 const Categories = ({language, displayCategories, category, setCategory, currentScore, setLanguage}) => {
 
@@ -70,13 +72,41 @@ const Categories = ({language, displayCategories, category, setCategory, current
                   
                     categories.map((categorie) => {
 
-                        return <button className={ categorie } key={categorie} onClick={() => changeCategory(categorie)}> { categorie.toUpperCase() } </button>
+                        const normalizatedCategorie = categorie[0].toLowerCase()
+
+                        return <button
+                                    className={ categorie[0] }
+                                    key={categorie[0]}
+                                    onClick={() => changeCategory(categorie[0])}
+                                >
+
+                                    <img src={images[normalizatedCategorie]} alt={normalizatedCategorie}/>
+
+                                    <span className="text">
+                                        { categorie[0].toUpperCase() }
+                                    </span>
+
+                                    <div className="blank-space"></div>
+
+                                </button>
                     })
 
                 : null
             }
 
-            <button className='Random' key='Random' onClick={() => changeCategory('')}>{'Random'.toUpperCase()}</button>
+            <button
+                className='Random'
+                key='Random'
+                onClick={() => changeCategory('')}
+            >
+
+                <img src={images['random']} alt="random-icon" />
+                <span className="text">
+                    {'Random'.toUpperCase()}
+                </span>
+
+                <div className="blank-space"></div>
+            </button>
         </div>
     )
 }

src/components/Categories/Firebase Querys/Bring All Categories.js

@@ -20,15 +20,15 @@ const Bring_All_Categories = async (setCategories, setStrech, language) => {
             
             if (language === 'english') {
 
-                categories = result.docs.map(doc => doc.data().english)
+                categories = result.docs.map(doc => [doc.data().english, doc.data().iconRoute])
             }
             
             if (language === 'spanish') {
-                categories = result.docs.map(doc => doc.data().spanish)
+                categories = result.docs.map(doc => [doc.data().spanish, doc.data().iconRoute])
 
             }
 
-                categories = categories.map(word => capitalize(word, true))
+                categories = categories.map(doc => [capitalize(doc[0], true), doc[1]])
     
             console.log(categories)
             setCategories(await categories)

src/components/Categories/Images.js

@@ -0,0 +1,26 @@
+import animals from './img/categories-icons/animals.png'
+import cities from './img/categories-icons/cities.png'
+import countries from './img/categories-icons/countries.png'
+import pokemon from './img/categories-icons/pokemon.png'
+import programmingLanguage from './img/categories-icons/programming language.png'
+import random from './img/categories-icons/random.png'
+
+const images = {
+    animals: animals,
+    animales: animals,
+
+    cities: cities,
+    ciudades: cities,
+
+    countries: countries,
+    países: countries,
+
+    pokemon: pokemon,
+
+    'programming languages': programmingLanguage,
+    'lenguajes de programación': programmingLanguage,
+
+    random: random
+}
+
+export default images