Resize the cog icon and change it's look

The cog icon looked too large before and the way it looked wasn't too
good. Updated the icons SVG and changed its size.

css/main.css

@@ -154,10 +154,13 @@ body {
       cursor: pointer; }
 
 #settings-cog {
-  width: 48px;
-  height: 48px;
+  width: 23px;
+  height: 23px;
   position: absolute;
   bottom: 25px;
-  right: 25px; }
-  #settings-cog .cog:hover {
-    fill: white; }
+  right: 25px;
+  transition: 2s ease-in; }
+  #settings-cog:hover .cog {
+    fill: white;
+    stroke: white;
+    transition: 2s ease-in; }

index.html

@@ -35,8 +35,10 @@ <h2 id="weather-text">Fetching Weather...</h2>
         </div>
         <div id="other-content">
         </div>
-        <svg viewBox="0 0 24 24" id="settings-cog">
-          <path class="cog" fill="#6F6F6F" ng-attr-d="{{icon.data}}" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path>
+        <svg id="settings-cog" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" viewBox="0 0 24 24" stroke-width="1.5" stroke="#607D8B" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z"/>
+            <path class="cog" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+            <circle cx="12" cy="12" r="3" />
         </svg>
     </div>
     <!--JSON Editor-->

scss/main.scss

@@ -254,13 +254,16 @@ body {
 }
 
 #settings-cog {
-    width: 48px;
-    height: 48px;
+    width: 23px;
+    height: 23px;
     position: absolute;
     bottom: 25px;
-    right: 25px; 
-
-    .cog:hover {
+    right: 25px;
+    transition: 2s ease-in;
+
+    &:hover .cog {
         fill: white;
+        stroke: white;
+        transition: 2s ease-in;
     }
 }