Add a version of flights that's made of components.

sky/examples/flights/index.sky

 <app>
   <style>
     * { box-sizing: border-box; }
 
     t, span {
       display: inline;
     }
 
     app {
       display: flex;
       flex-direction: column;
       height: 100%;
       background-color: #494949;
-      font-family: "Helvetica Neue", sans-serif;
+      font-family: sans-serif;
       font-size: 16px;
       color: #2B2B2B;
     }
 
     app-header {
       display: flex;
       background: linear-gradient(#3E77B7, #6C98C4);
       padding: 8px;
       color: white;
       border-bottom: 1px solid #3E77B7;
@@ skipping 140 matching lines @@
   <app-header>
     <app-title>
       <t>Search</t>
     </app-title>
     <app-menu-button>
       <img src="images/menu-white.png" class="menu-icon">
     </app-menu-button>
   </app-header>
   <app-toolbar>
     <app-search-input>
-      <span class="input-icon"><t>&#128270;</t></span>
+      <span class="input-icon">
+        <img src="/sky/examples/flights/images/magnifying-glass.png" style="width: 16px">
+      </span>
       <span class="input-text"><t>flights today to dc by price</t></span>
     </app-search-input>
   </app-toolbar>
   <app-scrollable>
     <app-panel class="route-result">
       <app-panel-header>
         <div class="route-title">
           <t>SFO to DCA</t>
         </div>
         <app-menu-button>
@@ skipping 93 matching lines @@
     <app-toast-header>
       <div class="tip-icon">
         <t>?</t>
       </div>
     </app-toast-header>
     <app-toast-content>
       <t>Flights are <span class="tip-price">$200</span> cheaper tomorrow.</t>
     </app-toast-content>
   </app-toast>
 </app>