fix: add button component icons

ReVanced · Dec 17, 2024 · e7edac2 · e7edac2
1 parent 9e8b2ea
commit e7edac2
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 9 deletions.
diff --git a/src/layout/Hero/HeroSection.svelte b/src/layout/Hero/HeroSection.svelte
@@ -1,5 +1,8 @@
 <script>
 	import Button from '$lib/components/Button.svelte';
+
+	import TrayArrowDown from 'svelte-material-icons/TrayArrowDown.svelte';
+	import FileDocumentOutline from 'svelte-material-icons/FileDocumentOutline.svelte';
 </script>
 
 <section class="hero">
@@ -9,8 +12,22 @@
 			Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
 		</p>
 		<div class="hero-buttons">
-			<Button icon="download" type="filled" href="download">Download</Button>
-			<Button icon="docs" type="tonal" href="patches">View patches</Button>
+			<Button type="filled" href="download">
+				<svelte:fragment slot="icon">
+					<div class="material-icon-container">
+						<TrayArrowDown size="20px" />
+					</div>
+				</svelte:fragment>
+				Download
+			</Button>
+			<Button type="tonal" href="patches">
+				<svelte:fragment slot="icon">
+					<div class="material-icon-container">
+						<FileDocumentOutline size="20px" />
+					</div>
+				</svelte:fragment>
+				View patches
+			</Button>
 		</div>
 	</div>
 </section>

diff --git a/src/routes/download/+page.svelte b/src/routes/download/+page.svelte
@@ -7,6 +7,8 @@
 
 	import manager_screenshot from '$images/manager.png?format=avif;webp;png&as=picture';
 
+	import TrayArrowDown from 'svelte-material-icons/TrayArrowDown.svelte';
+
 	import Head from '$lib/components/Head.svelte';
 	import Query from '$lib/components/Query.svelte';
 	import Button from '$lib/components/Button.svelte';
@@ -89,16 +91,21 @@
 	<div class="buttons">
 		<Query {query} let:data>
 			{#if !isAndroid || androidVersion < 8}
-				<Button on:click={handleClick} type="filled" icon="download">
+				<Button on:click={handleClick} type="filled">
+					<svelte:fragment slot="icon">
+						<div class="material-icon-container">
+							<TrayArrowDown size="20px" />
+						</div>
+					</svelte:fragment>
 					{data.release.version}
 				</Button>
 			{:else}
-				<Button
-					on:click={handleClick}
-					type="filled"
-					icon="download"
-					href={data.release.download_url}
-				>
+				<Button on:click={handleClick} type="filled" href={data.release.download_url}>
+					<svelte:fragment slot="icon">
+						<div class="material-icon-container">
+							<TrayArrowDown size="20px" />
+						</div>
+					</svelte:fragment>
 					{data.release.version}
 				</Button>
 			{/if}