feat(demo): add new icon

README.md

@@ -1,4 +1,7 @@
-# Ngx Gallery
+<p align="center">
+  <img width="150px" src="https://raw.githubusercontent.com/daelmaak/ngx-gallery/2bd4e961c590edeeac3cf9a230f504a51b7db8ad/apps/demo/src/assets/icons/logo.png" style="max-width:100%;">
+</p>
+<h1 align="center">Ngx Gallery</h1>
 
 Small, performant, responsive, dependency free, easy to use Angular **8+** gallery.
 

apps/demo/src/app/components/header/header.component.html

@@ -1,7 +1,10 @@
 <header>
   <div class="header-inner-container">
     <div>
-      <h1>Ngx Gallery</h1>
+      <div class="heading-container">
+        <img class="logo" src="./assets/icons/logo.webp" alt="logo" />
+        <h1>Ngx Gallery</h1>
+      </div>
       <div class="subtitle">
         Performant, mobile first, easy to use Angular 8+ Gallery
       </div>

apps/demo/src/app/components/header/header.component.scss

@@ -21,13 +21,6 @@ header {
     align-items: center;
     justify-content: center;
 
-    .logo {
-      width: 110px;
-      position: relative;
-      right: 30px;
-      filter: drop-shadow(0px 0px 2px black);
-    }
-
     @media (max-width: 767px) {
       display: block;
 
@@ -42,8 +35,7 @@ header {
 
   h1 {
     text-align: center;
-    margin-top: 0;
-    margin-bottom: 10px;
+    margin: 0;
   }
 
   .subtitle {
@@ -85,3 +77,15 @@ header {
     }
   }
 }
+
+.heading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.logo {
+  width: 3rem;
+}

apps/demo/src/index.html

@@ -6,6 +6,7 @@
     <base href="/" />
     <meta name="description" content="Angular Gallery/Carousel component" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="/assets/icons/logo.ico" />
     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"