Add home icon to home button

sass/_nav.scss

@@ -102,6 +102,10 @@
 
 						&:hover {
 							color: var(--primary-color);
+
+							.icon {
+								background-color: var(--primary-color);
+							}
 						}
 
 						&.active {
@@ -111,11 +115,31 @@
 							&:hover {
 								background-color: var(--primary-color);
 								color: var(--contrast-color);
+
+								.icon {
+									background-color: var(--contrast-color);
+								}
 							}
 
 							&::before {
 								display: none;
 							}
+
+							.icon {
+								background-color: var(--primary-color);
+							}
+						}
+
+						.icon {
+							$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .361a2.2 2.2 0 0 0-1.41.51L2.129 4.59A3.14 3.14 0 0 0 1 7v6c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V7c0-.93-.414-1.813-1.129-2.41L9.411.87A2.2 2.2 0 0 0 8 .361m0 2.002a.2.2 0 0 1 .129.047l4.46 3.719c.263.215.411.535.411.871v6c0 .547-.453 1-1 1h-2V9c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5H4c-.547 0-1-.453-1-1V7c0-.336.148-.656.41-.871L7.871 2.41A.2.2 0 0 1 8 2.363'/%3E%3C/svg%3E");
+							-webkit-mask-image: $icon;
+							vertical-align: -0.125em;
+							mask-image: $icon;
+							transition: var(--transition);
+							margin-inline-end: 0.25rem;
+							background-color: var(--fg-muted-5);
+							width: 1rem;
+							height: 1rem;
 						}
 					}
 

templates/partials/nav.html

@@ -11,6 +11,7 @@
 					{%- if current_url | default(value="/") | trim_end_matches(pat="/") | safe == get_url(path="/", lang=lang) | trim_end_matches(pat='/') | safe -%}
 						class="active"
 					{%- endif -%}>
+					<i class="icon"></i>
 					{{- config.title -}}
 				</a>
 			</li>