Feat(replace-icons): Replaced icons

src/app/core/components/footer/footer.component.html

@@ -11,12 +11,13 @@
 
       <div class="footer-socials">
         @for (icon of socialIcons; track icon.name) {
-          <a
-            class="icon-link"
-            [href]="icon.url"
-            [attr.aria-label]="icon.ariaLabel"
-          >
-            <i [class]="'osf-icon-' + icon.name"></i>
+          <a [href]="icon.url" [attr.aria-label]="icon.ariaLabel">
+            <img
+              alt="social media icon"
+              width="37"
+              height="37"
+              [ngSrc]="'assets/icons/socials/' + icon.name + '.svg'"
+            />
           </a>
         }
       </div>

src/app/core/components/footer/footer.component.scss

@@ -32,21 +32,7 @@
 
     .footer-socials {
       @include mix.flex-center;
-      gap: 0.5rem;
-
-      .icon-link {
-        @include mix.flex-center;
-        height: 2.6rem;
-        width: 2.6rem;
-        border-radius: 0.5rem;
-        background-color: var.$pr-blue-1;
-        text-decoration: none;
-
-        i {
-          color: white;
-          font-size: 1.4rem;
-        }
-      }
+      gap: 0.2rem;
     }
   }
 

src/app/core/components/footer/footer.component.ts

@@ -3,11 +3,12 @@ import { SocialIcon } from '@osf/shared/entities/social-icon.interface';
 import { RouterLink } from '@angular/router';
 import { IS_PORTRAIT, IS_XSMALL } from '@shared/utils/breakpoints.tokens';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { NgOptimizedImage } from '@angular/common';
 
 @Component({
   standalone: true,
   selector: 'osf-footer',
-  imports: [RouterLink],
+  imports: [RouterLink, NgOptimizedImage],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -20,7 +21,7 @@ export class FooterComponent {
 
   protected readonly socialIcons: SocialIcon[] = [
     {
-      name: 'twitter',
+      name: 'x',
       url: '#',
       ariaLabel: 'X (formerly Twitter)',
     },

src/app/features/search/search.component.html

@@ -1,6 +1,6 @@
 <div class="search-container">
   <img
-    ngSrc="assets/icons/system/question-mark.svg"
+    ngSrc="assets/icons/colored/question-mark.svg"
     alt="better-research"
     tabindex="0"
     role="button"