use material icons instead of font awesome

Author: joelhawksley

app/apis/weather_kit_api.rb

@@ -130,20 +130,21 @@ def weather_alert_calendar_events
 
   def icon_for(condition_code)
     icon_mappings = {
-      "Thunderstorms" => "cloud-bolt",
-      "Cloudy" => "clouds",
-      "MostlyCloudy" => "clouds",
-      "PartlyCloudy" => "clouds-sun",
-      "MostlyClear" => "cloud-sun",
-      "Clear" => "sun",
-      "Windy" => "wind",
-      "Drizzle" => "raindrops",
-      "Rain" => "raindrops",
-      "HeavyRain" => "raindrops",
-      "Haze" => "sun-haze",
-      "Snow" => "snowflake",
-      "HeavySnow" => "snowflakes",
-      "Flurries" => "snowflake"
+      "Thunderstorms" => "thunderstorm",
+      "Cloudy" => "cloud",
+      "MostlyCloudy" => "cloud",
+      "PartlyCloudy" => "partly_cloudy_day",
+      "MostlyClear" => "partly_cloudy_day",
+      "Clear" => "sunny",
+      "Windy" => "air",
+      "Drizzle" => "rainy",
+      "Rain" => "rainy",
+      "HeavyRain" => "rainy",
+      "Haze" => "foggy",
+      "Snow" => "ac_unit",
+      "HeavySnow" => "sac_unit",
+      "Flurries" => "ac_unit",
+      "Foggy" => "foggy"
     }
 
     if icon_mappings[condition_code]

app/models/calendar_feed.rb

@@ -54,7 +54,7 @@ def baby_age_event(birthdate = Date.parse(Timeframe::Application.config.local["b
       id: "_baby_age",
       starts_at: Date.today.to_time,
       ends_at: (Date.today + 1.day).to_time,
-      icon: "baby-carriage",
+      icon: "stroller",
       summary: summary
     )
   end

app/views/displays/_timeline.html.erb

@@ -9,7 +9,7 @@
               <% if event.letter.present? %>
                 <%= event.letter %>
               <% else %>
-                <i class="fa-fw fa-solid fa-<%= event.icon %>"></i>
+                <span class="material-symbols-rounded"><%= event.icon %></span>
               <% end %>
             </td>
             <td>
@@ -30,7 +30,7 @@
               <% if event.letter.present? %>
                 <%= event.letter %>
               <% else %>
-                <i class="fa-fw fa-solid fa-<%= event.icon %>"></i>
+                <span class="material-symbols-rounded"><%= event.icon %></span>
               <% end %>
             </td>
             <td style="white-space: nowrap; font-size: .75rem; padding: 0 .5rem; width: 5.5rem;">

app/views/displays/mira.html.erb

@@ -21,7 +21,7 @@
     <div class="hide-if-empty" style="background-color: #ddd; color: black; padding: 0.5rem 2rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
       <div>
         <div style="display: inline-block; padding-right: 1rem; vertical-align: super">
-          <i class="fa-solid fa-fw fa-<%= view_object[:minutely_weather_minutes_icon] %>"></i>
+          <span class="material-symbols-rounded"><%= view_object[:minutely_weather_minutes_icon] %></span>
         </div>
         <div style="display: inline-block">
           <table class="minutely" border="0" cellpadding="0" cellspacing="0">
@@ -46,7 +46,7 @@
   <% end %>
   <% if view_object[:sonos_status].present? %>
     <div class="hide-if-empty" style="background-color: black; color: white; padding: 1rem 2rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
-      <i class="fa-solid fa-volume fa-fw"></i>
+      <span class="material-symbols-rounded" style="font-size: 2.5rem;vertical-align: middle;margin-top: -.6rem;">volume_up</span>
       <strong><%= view_object[:sonos_status][:artist] %></strong>
       <% if view_object[:sonos_status][:track].present? %>
         : <%= view_object[:sonos_status][:track] %>
@@ -60,14 +60,14 @@
   <div>
     <% view_object[:status_icons_with_labels].each do |status_icon, label| %>
       <span style="margin-right: .5rem;">
-        <i class="fa-solid fa-<%= status_icon %>"></i>
+        <span class="material-symbols-rounded"><%= status_icon %></span>
         <%= label %>
       </span>
     <% end %>
   </div>
   <div style="text-align: right;">
     <% if view_object[:birdnet_most_unusual_species_trailing_24h].present? %>
-      <i class="fa-solid fa-crow"></i>
+      <span class="material-symbols-rounded" style="vertical-align: text-bottom"> raven </span>
       <%= view_object[:birdnet_most_unusual_species_trailing_24h] %>
     <% else %>
       &nbsp;
@@ -78,7 +78,7 @@
 <div style="display: flex; justify-content: space-between; line-height: 2rem; font-size: 2rem;">
   <div>
     <% view_object[:status_icons].each do |status_icon| %>
-      <i class="fa-solid fa-<%= status_icon %>" style="margin-right: 1rem"></i>
+      <span class="material-symbols-rounded" style="margin-right: 1rem"><%= status_icon %></span>
     <% end %>
   </div>
   <div><%= DateTime.now.strftime("%A, %B %-d") %></div>

app/views/displays/thirteen.html.erb

@@ -5,19 +5,19 @@
 <div style="clear: both; line-height: .7; margin-bottom: 1rem; font-size: 1rem">
   <div style="float: left;">
     <% view_object[:status_icons].each do |status_icon| %>
-      <i class="fa-solid fa-<%= status_icon %>" style="margin-right: 1rem"></i>
+      <span class="material-symbols-rounded" style="margin-right: 1rem"><%= status_icon %></span>
     <% end %>
     <% view_object[:status_icons_with_labels].each do |status_icon, label| %>
       <span style="margin-right: 1rem;">
-        <i class="fa-solid fa-<%= status_icon %>"></i>
+        <span class="material-symbols-rounded"><%= status_icon %></span>
         <%= label %>
       </span>
     <% end %>
   </div>
   <div style="float: right; text-align: right;">
     <% if view_object[:birdnet_most_unusual_species_trailing_24h].present? %>
       <div style="display: inline-block;">
-        <i class="fa-solid fa-crow"></i>
+        <span class="material-symbols-rounded" style="vertical-align: text-bottom"> raven </span>
         <%= view_object[:birdnet_most_unusual_species_trailing_24h] %>
       </div>
     <% end %>

public/css/display.css

@@ -1,6 +1,26 @@
-@import "font-awesome/fontawesome.css";
-@import "font-awesome/solid.css";
-@import "font-awesome/regular.css";
+@font-face {
+  font-family: 'Material Symbols Rounded';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/material-symbols.woff2') format('woff2');
+}
+
+.material-symbols-rounded {
+  font-family: 'Material Symbols Rounded';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 1.25rem;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  padding-top: .2rem;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
 
 /* lato-regular - latin */
 @font-face {