From 6e040e418b98f5d4b0ef311f5cf02d8bac3ec4d9 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Fri, 5 Jul 2019 16:35:20 -0400
Subject: [PATCH] (js/css) Fix rendering of material icons

---
 .../AdministrationUI/UIxAdministration.wox    |  3 +-
 .../UIxAdministrationAclEditor.wox            |  3 +-
 .../ContactsUI/UIxContactEditorTemplate.wox   |  3 +-
 .../ContactsUI/UIxContactFoldersView.wox      | 23 +++----
 .../ContactsUI/UIxContactViewTemplate.wox     |  3 +-
 .../ContactsUI/UIxContactsUserFolders.wox     |  5 +-
 UI/Templates/MailerUI/UIxMailEditor.wox       | 17 ++---
 .../MailerUI/UIxMailFolderTemplate.wox        | 33 +++-------
 UI/Templates/MailerUI/UIxMailViewTemplate.wox |  6 +-
 UI/Templates/SchedulerUI/UIxCalDayView.wox    |  3 +-
 UI/Templates/SchedulerUI/UIxCalMainView.wox   | 65 +++++++------------
 UI/Templates/SchedulerUI/UIxCalMonthView.wox  |  3 +-
 .../SchedulerUI/UIxCalMulticolumnDayView.wox  |  3 +-
 UI/Templates/SchedulerUI/UIxCalWeekView.wox   |  3 +-
 UI/Templates/UIxTopnavToolbar.wox             |  6 +-
 .../js/Common/sgColorPicker.directive.js      |  2 +-
 .../Scheduler/sgCalendarDayBlock.directive.js |  8 +--
 .../sgCalendarListEvent.directive.js          |  8 +--
 .../sgCalendarMonthEvent.directive.js         |  8 +--
 .../scss/components/icon/icon.scss            | 61 ++---------------
 20 files changed, 79 insertions(+), 187 deletions(-)

diff --git a/UI/Templates/AdministrationUI/UIxAdministration.wox b/UI/Templates/AdministrationUI/UIxAdministration.wox
index e92ff29f8..c823117ef 100644
--- a/UI/Templates/AdministrationUI/UIxAdministration.wox
+++ b/UI/Templates/AdministrationUI/UIxAdministration.wox
@@ -108,8 +108,7 @@
                   <md-list-item class="sg-folder" ng-repeat="folder in user.$$folders"
                                 aria-label="{{::folder.displayName}}" title="{{::folder.displayName}}"
                                 ng-click="app.selectFolder(folder)">
-                    <md-icon ng-class="{ 'icon-contacts': folder.type == 'Contact',
-                                       'icon-event': folder.type == 'Appointment' }"><!--icon--></md-icon>
+                    <md-icon>{{ folder.type == 'Contact' ? 'contacts' : 'event' }}</md-icon>
                     <span class="sg-no-wrap" ng-bind="::folder.displayName"><!-- folder name --></span>
                   </md-list-item>
                   <md-divider><!-- divider --></md-divider>
diff --git a/UI/Templates/AdministrationUI/UIxAdministrationAclEditor.wox b/UI/Templates/AdministrationUI/UIxAdministrationAclEditor.wox
index 78b1dbf0f..24e7b1f28 100644
--- a/UI/Templates/AdministrationUI/UIxAdministrationAclEditor.wox
+++ b/UI/Templates/AdministrationUI/UIxAdministrationAclEditor.wox
@@ -31,8 +31,7 @@
             <div class="msg-header-content">
               <div ng-class="{ 'sg-md-display-2--thin': isGtMedium,
                              'sg-md-title': !isGtMedium }">{{::acl.user.cn}}</div>
-              <div class="md-truncate sg-md-display-2-subheader"><md-icon ng-class="{ 'icon-contacts': acl.folderType == 'AddressBook',
-                                                                                    'icon-event': acl.folderType == 'Calendar' }"><!--icon--></md-icon>
+              <div class="md-truncate sg-md-display-2-subheader"><md-icon>{{ acl.folderType == 'AddressBook' ? 'contacts' : 'event' }}</md-icon>
               {{::acl.folder.name}}
               </div>
             </div>
diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index bf280f9ff..9d373520f 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -12,8 +12,7 @@
         <md-button ng-click="toggleCenter()"
                    class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
                    aria-hidden="true">
-          <md-icon class="icon-fullscreen"
-                   ng-class="{ 'icon-fullscreen-exit': centerIsClose }"><!-- fullscreen --></md-icon>
+          <md-icon>{{ centerIsClose ? 'fullscreen_exit' : 'fullscreen' }}</md-icon>
         </md-button>
         <div class="md-flex"><!-- spacer --></div>
         <md-button class="md-icon-button"
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 0b815eea4..2e4056146 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -255,44 +255,37 @@
               <md-menu-content>
                 <md-menu-item>
                   <md-button ng-click="addressbook.sort('c_cn')">
-                    <md-icon ng-class="{ 'icon-check': addressbook.sortedBy('c_cn') }">
-                      <!-- selected --></md-icon> <var:string label:value="Name"/>
+                    <md-icon>{{ addressbook.sortedBy('c_cn') ? 'check' : null }}</md-icon> <var:string label:value="Name"/>
                   </md-button>
                 </md-menu-item>
                 <md-menu-item>
                   <md-button ng-click="addressbook.sort('c_sn')">
-                    <md-icon ng-class="{ 'icon-check': addressbook.sortedBy('c_sn') }">
-                      <!-- selected --></md-icon> <var:string label:value="Lastname"/>
+                    <md-icon>{{ addressbook.sortedBy('c_sn') ? 'check' : null }}</md-icon> <var:string label:value="Lastname"/>
                   </md-button>
                 </md-menu-item>
                 <md-menu-item>
                   <md-button ng-click="addressbook.sort('c_givenname')">
-                    <md-icon ng-class="{ 'icon-check': addressbook.sortedBy('c_givenname') }">
-                      <!-- selected --></md-icon> <var:string label:value="Firstname"/>
+                    <md-icon>{{ addressbook.sortedBy('c_givenname') ? 'check' : null }}</md-icon> <var:string label:value="Firstname"/>
                   </md-button>
                 </md-menu-item>
                 <md-menu-item>
                   <md-button ng-click="addressbook.sort('c_mail')">
-                    <md-icon ng-class="{ 'icon-check': addressbook.sortedBy('c_mail') }">
-                      <!-- selected --></md-icon> <var:string label:value="Email"/>
+                    <md-icon>{{ addressbook.sortedBy('c_mail') ? 'check' : null }}</md-icon> <var:string label:value="Email"/>
                   </md-button>
                 </md-menu-item>
                 <md-menu-item>
                   <md-button ng-click="addressbook.sort('c_screenname')">
-                    <md-icon ng-class="{ 'icon-check': addressbook.sortedBy('c_screenname') }">
-                      <!-- selected --></md-icon> <var:string label:value="Screen Name"/>
+                    <md-icon>{{ addressbook.sortedBy('c_screenname') ? 'check' : null }}</md-icon> <var:string label:value="Screen Name"/>
                   </md-button>
                 </md-menu-item>
                 <md-menu-item>
                   <md-button ng-click="addressbook.sort('c_o')">
-                    <md-icon ng-class="{ 'icon-check': addressbook.sortedBy('c_o') }">
-                      <!-- selected --></md-icon> <var:string label:value="Organization"/>
+                    <md-icon>{{ addressbook.sortedBy('c_o') ? 'check' : null }}</md-icon> <var:string label:value="Organization"/>
                   </md-button>
                 </md-menu-item>
                 <md-menu-item>
                   <md-button ng-click="addressbook.sort('c_telephonenumber')">
-                    <md-icon ng-class="{ 'icon-check': addressbook.sortedBy('c_telephonenumber') }">
-                      <!-- selected --></md-icon> <var:string label:value="Preferred Phone"/>
+                    <md-icon>{{ addressbook.sortedBy('c_telephonenumber') ? 'check' : null }}</md-icon> <var:string label:value="Preferred Phone"/>
                   </md-button>
                 </md-menu-item>
                 <md-menu-divider> <!-- divider --></md-menu-divider>
@@ -567,7 +560,7 @@
     <md-dialog flex="40" flex-sm="80" flex-xs="100" label:aria-label="Import Cards">
       <md-toolbar>
         <div class="md-toolbar-tools">
-          <md-icon class="material-icons sg-icon-toolbar-bg">import_export</md-icon>
+          <md-icon class="sg-icon-toolbar-bg">import_export</md-icon>
           <div class="md-flex">
             <div class="sg-md-title"><var:string label:value="Import Cards"/></div>
           </div>
diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
index a9aec84c8..d55de0538 100644
--- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
@@ -13,8 +13,7 @@
           <md-button ng-click="toggleCenter()"
                      class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
                      aria-hidden="true">
-            <md-icon class="icon-fullscreen"
-                     ng-class="{ 'icon-fullscreen-exit': centerIsClose }"><!-- fullscreen --></md-icon>
+            <md-icon>{{ centerIsClose ? 'fullscreen_exit' : 'fullscreen' }}</md-icon>
           </md-button>
           <md-button class="sg-icon-button hide-gt-xs"
                      label:aria-label="Close"
diff --git a/UI/Templates/ContactsUI/UIxContactsUserFolders.wox b/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
index ad55fa253..c5bc9e125 100644
--- a/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
+++ b/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
@@ -56,9 +56,8 @@
           </div>
           <div layout="row" layout-align="start center" layout-fill="true"
                ng-repeat="folder in user.$$folders">
-            <md-icon ng-class="{ 'icon-contacts': folder.type == 'Contact',
-                                 'icon-event': folder.type == 'Appointment' }"><!--icon--></md-icon>
-            <p class="sg-padded--left md-flex">{{folder.displayName}}</p>
+            <md-icon>{{ folder.type == 'Contact' ? 'contacts' : 'event' }}</md-icon>
+            <div class="sg-padded--left md-flex" md-truncate="md-truncate">{{folder.displayName}}</div>
             <md-button class="md-raised"
                        ng-click="subscribe.selectFolder(folder)"><var:string label:value="Subscribe"/></md-button>
           </div>
diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index f768aba45..5231d616e 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -19,11 +19,10 @@
         <div class="md-toolbar-tools">
           <!-- expand dialog -->
           <md-button ng-click="editor.toggleFullscreen($event)"
-                     class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
+                     class="md-icon-button hide show-gt-xs"
                      aria-hidden="true"
                      ng-if="!isPopup">
-            <md-icon class="icon-fullscreen"
-                     ng-class="{ 'icon-fullscreen-exit': editor.isFullscreen }"><!-- fullscreen --></md-icon>
+            <md-icon>{{ editor.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</md-icon>
           </md-button>
           <!-- from -->
           <sg-avatar-image class="hide-xs"
@@ -205,33 +204,31 @@
                 </md-menu-item>
                 <md-menu-item>
                   <md-button ng-click="editor.message.editable.priority = 1">
-                    <md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 1}"><!-- highest --></md-icon>
+                    <md-icon>{{ editor.message.editable.priority == 1 ? 'check' : null }}</md-icon>
                     <var:string label:value="highest"/>
                   </md-button>
                 </md-menu-item>
                 <md-menu-item>
                   <md-button ng-click="editor.message.editable.priority = 2">
-                    <md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 2}"><!-- high --></md-icon>
+                    <md-icon>{{ editor.message.editable.priority == 2 ? 'check' : null }}</md-icon>
                     <var:string label:value="high"/>
                   </md-button>
                 </md-menu-item>
                 <md-menu-item>
                   <md-button ng-click="editor.message.editable.priority = 3">
-                    <md-icon ng-class="{ 'icon-check':
-                                       !editor.message.editable.priority
-                                       || editor.message.editable.priority == 3}"><!-- normal --></md-icon>
+                    <md-icon>{{ (!editor.message.editable.priority || editor.message.editable.priority == 3) ? 'check' : null }}</md-icon>
                     <var:string label:value="normal"/>
                   </md-button>
                 </md-menu-item>
                 <md-menu-item>
                   <md-button ng-click="editor.message.editable.priority = 4">
-                    <md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 4}"><!-- low --></md-icon>
+                    <md-icon>{{ editor.message.editable.priority == 4 ? 'check' : null }}</md-icon>
                     <var:string label:value="low"/>
                   </md-button>
                 </md-menu-item>
                 <md-menu-item>
                   <md-button ng-click="editor.message.editable.priority = 5">
-                    <md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 5}"><!-- lowest --></md-icon>
+                    <md-icon>{{ editor.message.editable.priority == 5 ? 'check' : null }}</md-icon>
                     <var:string label:value="lowest"/>
                   </md-button>
                 </md-menu-item>
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index e958d9ac9..8727539b6 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -42,16 +42,14 @@
             <md-menu-divider><!-- divider --></md-menu-divider>
             <md-menu-item>
               <md-button ng-click="app.search.match='AND'">
-                <md-icon ng-class="{ 'icon-check': app.search.match == 'AND'}"
-                         label:aria-label="Match all of the following">
-                  <!-- all --></md-icon><var:string label:value="Match all of the following"/>
+                <md-icon label:aria-label="Match all of the following">{{ app.search.match == 'AND' ? 'check' : null }}</md-icon>
+                <var:string label:value="Match all of the following"/>
               </md-button>
             </md-menu-item>
             <md-menu-item>
               <md-button ng-click="app.search.match='OR'">
-                <md-icon ng-class="{ 'icon-check': app.search.match == 'OR'}"
-                         label:aria-label="Match any of the following">
-                  <!-- any --></md-icon><var:string label:value="Match any of the following"/>
+                <md-icon label:aria-label="Match any of the following">{{ app.search.match == 'OR' ? 'check' : null }}</md-icon>
+                <var:string label:value="Match any of the following"/>
               </md-button>
             </md-menu-item>
           </md-menu-content>
@@ -60,8 +58,7 @@
                    label:aria-label="Search"
                    ng-click="app.toggleAdvancedSearch()"
                    ng-disabled="app.search.params.length == 0">
-          <md-icon ng-class="{'icon-stop': app.service.selectedFolder.$isLoading,
-                              'icon-search': !app.service.selectedFolder.$isLoading}"><!-- icon --></md-icon>
+          <md-icon>{{ app.service.selectedFolder.$isLoading ? 'stop' : 'search' }}</md-icon>
         </md-button>
       </div>
     </md-toolbar>
@@ -84,37 +81,27 @@
           <md-menu-content>
             <md-menu-item>
               <md-button ng-click="mailbox.sort('subject')">
-                <md-icon ng-class="{ 'icon-check': mailbox.sortedBy('subject') }"
-                         label:aria-label="Subject">
-                  <!-- subject --></md-icon> <var:string label:value="Subject"/>
+                <md-icon label:aria-label="Subject">{{ mailbox.sortedBy('subject') ? 'check' : null }}</md-icon> <var:string label:value="Subject"/>
               </md-button>
             </md-menu-item>
             <md-menu-item>
               <md-button ng-click="mailbox.sort('from')">
-                <md-icon ng-class="{ 'icon-check': mailbox.sortedBy('from') }"
-                         label:aria-label="From">
-                  <!-- from --></md-icon> <var:string label:value="From"/>
+                <md-icon label:aria-label="From">{{ mailbox.sortedBy('from') ? 'check' : null }}</md-icon> <var:string label:value="From"/>
               </md-button>
             </md-menu-item>
             <md-menu-item>
               <md-button ng-click="mailbox.sort('date')">
-                <md-icon ng-class="{ 'icon-check': mailbox.sortedBy('date') }"
-                         label:aria-label="Date">
-                  <!-- date --></md-icon> <var:string label:value="Date"/>
+                <md-icon label:aria-label="Date">{{ mailbox.sortedBy('date') ? 'check' : null }}</md-icon> <var:string label:value="Date"/>
               </md-button>
             </md-menu-item>
             <md-menu-item>
               <md-button ng-click="mailbox.sort('size')">
-                <md-icon ng-class="{ 'icon-check': mailbox.sortedBy('size') }"
-                         label:aria-label="Size">
-                  <!-- size --></md-icon> <var:string label:value="Size"/>
+                <md-icon label:aria-label="Size">{{ mailbox.sortedBy('size') ? 'check' : null }}</md-icon> <var:string label:value="Size"/>
               </md-button>
             </md-menu-item>
 	    <md-menu-item>
               <md-button ng-click="mailbox.sort('arrival')">
-                <md-icon ng-class="{ 'icon-check': mailbox.sortedBy('arrival') }"
-                         label:aria-label="Order Received">
-                  <!-- order received --></md-icon> <var:string label:value="Order Received"/>
+                <md-icon label:aria-label="Order Received">{{ mailbox.sortedBy('arrival') ? 'check' : null }}</md-icon> <var:string label:value="Order Received"/>
               </md-button>
             </md-menu-item>
             <md-menu-divider> <!-- divider --></md-menu-divider>
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index 1f2bf190f..17275b14f 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -15,8 +15,7 @@
                      class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
                      aria-hidden="true"
                      ng-if="::!isPopup">
-            <md-icon class="icon-fullscreen"
-                     ng-class="{ 'icon-fullscreen-exit': centerIsClose }"><!-- fullscreen --></md-icon>
+            <md-icon>{{ centerIsClose ? 'fullscreen_exit' : 'fullscreen' }}</md-icon>
           </md-button>
           <md-button class="md-icon-button"
                      ng-if="::isPopup"
@@ -32,8 +31,7 @@
           </md-button>
           <div class="md-flex"><!-- spacer --></div>
           <md-button class="sg-icon-button" label:aria-label="Flagged" ng-click="viewer.message.toggleFlag()">
-            <md-icon ng-class="{'icon-star md-accent md-hue-2': viewer.message.isflagged,
-                               'icon-star-border': !viewer.message.isflagged}"><!-- flag --></md-icon>
+            <md-icon ng-class="{ 'md-accent md-hue-2': viewer.message.isflagged }">{{ viewer.message.isflagged ? 'star' : 'star_border' }}</md-icon>
           </md-button>
           <md-button class="sg-icon-button"
                      ng-hide="::viewer.message.isDraft"
diff --git a/UI/Templates/SchedulerUI/UIxCalDayView.wox b/UI/Templates/SchedulerUI/UIxCalDayView.wox
index 4b2bd924f..327d11c2c 100644
--- a/UI/Templates/SchedulerUI/UIxCalDayView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalDayView.wox
@@ -12,8 +12,7 @@
       <md-button ng-click="toggleCenter({save: true})"
                  class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
                  aria-hidden="true">
-        <md-icon class="icon-fullscreen"
-                 ng-class="{ 'icon-fullscreen-exit': centerIsClose }"><!-- fullscreen --></md-icon>
+        <md-icon>{{ centerIsClose ? 'fullscreen_exit' : 'fullscreen' }}</md-icon>
       </md-button>
       <md-button class="sg-icon-button"
                  var:aria-label="yesterdayName"
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index e035e6ae3..a7c2fc244 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -168,74 +168,62 @@
                 <md-menu-content width="4">
                   <md-menu-item>
                     <md-button ng-click="list.filter('view_all')">
-                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_all') }">
-                        <!-- selected --></md-icon> <var:string label:value="view_all"/>
+                      <md-icon>{{ list.filteredBy('view_all') ? 'check' : null }}</md-icon> <var:string label:value="view_all"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item>
                     <md-button ng-click="list.filter('view_today')">
-                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_today') }">
-                        <!-- selected --></md-icon> <var:string label:value="view_today"/>
+                      <md-icon>{{ list.filteredBy('view_today') ? 'check' : null }}</md-icon> <var:string label:value="view_today"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item>
                     <md-button ng-click="list.filter('view_next7')">
-                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_next7') }">
-                        <!-- selected --></md-icon> <var:string label:value="view_next7"/>
+                      <md-icon>{{ list.filteredBy('view_next7') ? 'check' : null }}</md-icon> <var:string label:value="view_next7"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item>
                     <md-button ng-click="list.filter('view_next14')">
-                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_next14') }">
-                        <!-- selected --></md-icon> <var:string label:value="view_next14"/>
+                      <md-icon>{{ list.filteredBy('view_next14') ? 'check' : null }}</md-icon> <var:string label:value="view_next14"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item>
                     <md-button ng-click="list.filter('view_next31')">
-                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_next31') }">
-                        <!-- selected --></md-icon><var:string label:value="view_next31"/>
+                      <md-icon>{{ list.filteredBy('view_next31') ? 'check' : null }}</md-icon><var:string label:value="view_next31"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item>
                     <md-button ng-click="list.filter('view_thismonth')">
-                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_thismonth') }">
-                        <!-- selected --></md-icon><var:string label:value="view_thismonth"/>
+                      <md-icon>{{ list.filteredBy('view_thismonth') ? 'check' : null }}</md-icon><var:string label:value="view_thismonth"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item>
                     <md-button ng-click="list.filter('view_thisyear')">
-                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_thisyear') }">
-                        <!-- selected --></md-icon><var:string label:value="view_thisyear"/>
+                      <md-icon>{{ list.filteredBy('view_thisyear') ? 'check' : null }}</md-icon><var:string label:value="view_thisyear"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item ng-if="list.componentType == 'events'">
                     <md-button ng-click="list.filter('view_future')">
-                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_future') }">
-                        <!-- selected --></md-icon> <var:string label:value="view_future"/>
+                      <md-icon>{{ list.filteredBy('view_future') ? 'check' : null }}</md-icon> <var:string label:value="view_future"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item ng-if="list.componentType == 'events'">
                     <md-button ng-click="list.filter('view_selectedday')">
-                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_selectedday') }">
-                        <!-- selected --></md-icon> <var:string label:value="view_selectedday"/>
+                      <md-icon>{{ list.filteredBy('view_selectedday') ? 'check' : null }}</md-icon> <var:string label:value="view_selectedday"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item ng-if="list.componentType == 'tasks'">
                     <md-button ng-click="list.filter('view_not_started')">
-                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_not_started') }">
-                        <!-- selected --></md-icon> <var:string label:value="view_not_started"/>
+                      <md-icon>{{ list.filteredBy('view_not_started') ? 'check' : null }}</md-icon> <var:string label:value="view_not_started"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item ng-if="list.componentType == 'tasks'">
                     <md-button ng-click="list.filter('view_overdue')">
-                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_overdue') }">
-                        <!-- selected --></md-icon> <var:string label:value="view_overdue"/>
+                      <md-icon>{{ list.filteredBy('view_overdue') ? 'check' : null }}</md-icon> <var:string label:value="view_overdue"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item ng-if="list.componentType == 'tasks'">
                     <md-button ng-click="list.filter('view_incomplete')">
-                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_incomplete') }">
-                        <!-- selected --></md-icon> <var:string label:value="view_incomplete"/>
+                      <md-icon>{{ list.filteredBy('view_incomplete') ? 'check' : null }}</md-icon> <var:string label:value="view_incomplete"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-divider ng-if="list.componentType == 'tasks'"><!-- divider --></md-menu-divider>
@@ -256,56 +244,47 @@
                 <md-menu-content width="4">
                   <md-menu-item>
                     <md-button ng-click="list.sort('title')">
-                      <md-icon ng-class="{ 'icon-check': list.sortedBy('title') }">
-                        <!-- selected --></md-icon> <var:string label:value="Title"/>
+                      <md-icon>{{ list.sortedBy('title') ? 'check' : null }}</md-icon> <var:string label:value="Title"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item>
                     <md-button ng-click="list.sort('location')">
-                      <md-icon ng-class="{ 'icon-check': list.sortedBy('location') }">
-                        <!-- selected --></md-icon> <var:string label:value="Location"/>
+                      <md-icon>{{ list.sortedBy('location') ? 'check' : null }}</md-icon> <var:string label:value="Location"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item>
                     <md-button ng-click="list.sort('calendarName')">
-                      <md-icon ng-class="{ 'icon-check': list.sortedBy('calendarName') }">
-                        <!-- selected --></md-icon> <var:string label:value="Calendar"/>
+                      <md-icon>{{ list.sortedBy('calendarName') ? 'check' : null }}</md-icon> <var:string label:value="Calendar"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item>
                     <md-button ng-click="list.sort('start')">
-                      <md-icon ng-class="{ 'icon-check': list.sortedBy('start') }">
-                        <!-- selected --></md-icon> <var:string label:value="Start"/>
+                      <md-icon>{{ list.sortedBy('start') ? 'check' : null }}</md-icon> <var:string label:value="Start"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item ng-if="list.componentType == 'events'">
                     <md-button ng-click="list.sort('end')">
-                      <md-icon ng-class="{ 'icon-check': list.sortedBy('end') }">
-                        <!-- selected --></md-icon> <var:string label:value="End"/>
+                      <md-icon>{{ list.sortedBy('end') ? 'check' : null }}</md-icon> <var:string label:value="End"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item ng-if="list.componentType == 'tasks'">
                     <md-button ng-click="list.sort('end')">
-                      <md-icon ng-class="{ 'icon-check': list.sortedBy('end') }">
-                        <!-- selected --></md-icon> <var:string label:value="Due Date"/>
+                      <md-icon>{{ list.sortedBy('end') ? 'check' : null }}</md-icon> <var:string label:value="Due Date"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item ng-if="list.componentType == 'tasks'">
                     <md-button ng-click="list.sort('priority')">
-                      <md-icon ng-class="{ 'icon-check': list.sortedBy('priority') }">
-                        <!-- selected --></md-icon> <var:string label:value="Priority"/>
+                      <md-icon>{{ list.sortedBy('priority') ? 'check' : null }}</md-icon> <var:string label:value="Priority"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item ng-if="list.componentType == 'tasks'">
                     <md-button ng-click="list.sort('category')">
-                      <md-icon ng-class="{ 'icon-check': list.sortedBy('category') }">
-                        <!-- selected --></md-icon> <var:string label:value="Category"/>
+                      <md-icon>{{ list.sortedBy('category') ? 'check' : null }}</md-icon> <var:string label:value="Category"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item ng-if="list.componentType == 'tasks'">
                     <md-button ng-click="list.sort('status')">
-                      <md-icon ng-class="{ 'icon-check': list.sortedBy('status') }">
-                        <!-- selected --></md-icon> <var:string label:value="Status"/>
+                      <md-icon>{{ list.sortedBy('status') ? 'check' : null }}</md-icon> <var:string label:value="Status"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-divider><!-- divider --></md-menu-divider>
@@ -606,7 +585,7 @@
     <md-dialog flex="40" flex-xs="100" label:aria-label="Import Calendar">
       <md-toolbar>
         <div class="md-toolbar-tools">
-          <md-icon class="material-icons sg-icon-toolbar-bg">import_export</md-icon>
+          <md-icon class="sg-icon-toolbar-bg">import_export</md-icon>
           <div class="md-flex">
             <div class="sg-md-title"><var:string label:value="Import Calendar"/></div>
           </div>
diff --git a/UI/Templates/SchedulerUI/UIxCalMonthView.wox b/UI/Templates/SchedulerUI/UIxCalMonthView.wox
index 43591ad87..ee8aaed5e 100644
--- a/UI/Templates/SchedulerUI/UIxCalMonthView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMonthView.wox
@@ -12,8 +12,7 @@
       <md-button ng-click="toggleCenter({save: true})"
                  class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
                  aria-hidden="true">
-        <md-icon class="icon-fullscreen"
-                 ng-class="{ 'icon-fullscreen-exit': centerIsClose }"><!-- fullscreen --></md-icon>
+        <md-icon>{{ centerIsClose ? 'fullscreen_exit' : 'fullscreen' }}</md-icon>
       </md-button>
       <md-button class="md-icon-button"
                  label:aria-label="Previous Month"
diff --git a/UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox b/UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
index 096b84d5d..f487aa820 100644
--- a/UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
@@ -12,8 +12,7 @@
       <md-button ng-click="toggleCenter({save: true})"
                  class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
                  aria-hidden="true">
-        <md-icon class="icon-fullscreen"
-                 ng-class="{ 'icon-fullscreen-exit': centerIsClose }"><!-- fullscreen --></md-icon>
+        <md-icon>{{ centerIsClose ? 'fullscreen_exit' : 'fullscreen' }}</md-icon>
       </md-button>
       <md-button class="md-icon-button"
                  var:aria-label="yesterdayName"
diff --git a/UI/Templates/SchedulerUI/UIxCalWeekView.wox b/UI/Templates/SchedulerUI/UIxCalWeekView.wox
index 3e9ecad07..fb4078eb6 100644
--- a/UI/Templates/SchedulerUI/UIxCalWeekView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalWeekView.wox
@@ -12,8 +12,7 @@
       <md-button ng-click="toggleCenter({save: true})"
                  class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
                  aria-hidden="true">
-        <md-icon class="icon-fullscreen"
-                 ng-class="{ 'icon-fullscreen-exit': centerIsClose }"><!-- fullscreen --></md-icon>
+        <md-icon>{{ centerIsClose ? 'fullscreen_exit' : 'fullscreen' }}</md-icon>
       </md-button>
       <md-button class="md-icon-button"
                  label:aria-label="Previous Week"
diff --git a/UI/Templates/UIxTopnavToolbar.wox b/UI/Templates/UIxTopnavToolbar.wox
index a15704ff3..eca299ba4 100644
--- a/UI/Templates/UIxTopnavToolbar.wox
+++ b/UI/Templates/UIxTopnavToolbar.wox
@@ -8,10 +8,8 @@
   <div class="md-toolbar-tools sg-toolbar-group-1" layout="row">
     <md-button ng-click="toggleLeft()"
                class="md-icon-button hide show-gt-md"
-               label:aria-label="Toggle Menu"
-               ng-switch="leftIsClose">
-      <md-icon ng-switch-when="true">fullscreen_exit</md-icon>
-      <md-icon ng-switch-when="false">fullscreen</md-icon>
+               label:aria-label="Toggle Menu">
+      <md-icon>{{ leftIsClose ? 'fullscreen_exit' : 'fullscreen' }}</md-icon>
     </md-button>
     <md-button ng-click="toggleLeft()"
                class="md-icon-button hide-gt-md"
diff --git a/UI/WebServerResources/js/Common/sgColorPicker.directive.js b/UI/WebServerResources/js/Common/sgColorPicker.directive.js
index f5bc50d06..8afed8df7 100644
--- a/UI/WebServerResources/js/Common/sgColorPicker.directive.js
+++ b/UI/WebServerResources/js/Common/sgColorPicker.directive.js
@@ -81,7 +81,7 @@
           column += 'class="selected" ';
         column += 'style="background-color: ' + currentColor + '" ng-click="$menuCtrl.setColor($event, \'' + currentColor + '\')">';
         if (selected)
-          column += '<md-icon class="icon-check" style="color: ' + currentContrastColor + '"></md-icon>';
+          column += '<md-icon style="color: ' + currentContrastColor + '">check</md-icon>';
         column += '</span>';
       }
 
diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
index 53a74904e..580ca5c9a 100644
--- a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
+++ b/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
@@ -53,13 +53,13 @@
         //     Icons
         '      <span class="icons">',
         //       Component is reccurent
-        '        <md-icon ng-if="'+p+'block.component.occurrenceId" class="material-icons icon-repeat"></md-icon>',
+        '        <md-icon ng-if="'+p+'block.component.occurrenceId">repeat</md-icon>',
         //       Component has an alarm
-        '        <md-icon ng-if="'+p+'block.component.c_nextalarm" class="material-icons icon-alarm"></md-icon>',
+        '        <md-icon ng-if="'+p+'block.component.c_nextalarm">alarm</md-icon>',
         //       Component is confidential
-        '        <md-icon ng-if="'+p+'block.component.c_classification == 2" class="material-icons icon-visibility-off"></md-icon>',
+        '        <md-icon ng-if="'+p+'block.component.c_classification == 2">visibility_off</md-icon>',
         //       Component is private
-        '        <md-icon ng-if="'+p+'block.component.c_classification == 1" class="material-icons icon-vpn-key"></md-icon>',
+        '        <md-icon ng-if="'+p+'block.component.c_classification == 1">vpn_key</md-icon>',
         '      </span>',
         //     Location
         '      <div class="secondary" ng-if="'+p+'block.component.c_location">',
diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarListEvent.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarListEvent.directive.js
index 3c0ae7285..dffe0d83b 100644
--- a/UI/WebServerResources/js/Scheduler/sgCalendarListEvent.directive.js
+++ b/UI/WebServerResources/js/Scheduler/sgCalendarListEvent.directive.js
@@ -46,13 +46,13 @@
         '      {{ ::component.c_title }}',
         '      <span class="icons">',
         //       Component is reccurent
-        '        <md-icon ng-if="::component.occurrenceId" class="material-icons icon-repeat"></md-icon>',
+        '        <md-icon ng-if="::component.occurrenceId">repeat</md-icon>',
         //       Component has an alarm
-        '        <md-icon ng-if="::component.c_nextalarm" class="material-icons icon-alarm"></md-icon>',
+        '        <md-icon ng-if="::component.c_nextalarm">alarm</md-icon>',
         //       Component is confidential
-        '        <md-icon ng-if="::component.c_classification == 2" class="material-icons icon-visibility-off"></md-icon>',
+        '        <md-icon ng-if="::component.c_classification == 2">visibility_off</md-icon>',
         //       Component is private
-        '        <md-icon ng-if="::component.c_classification == 1" class="material-icons icon-vpn-key"></md-icon>',
+        '        <md-icon ng-if="::component.c_classification == 1">vpn_key</md-icon>',
         '      </span>',
         //     Time
         '      <div class="secondary" ng-if="::!component.c_isallday">',
diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarMonthEvent.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarMonthEvent.directive.js
index 307563981..39d3819c4 100644
--- a/UI/WebServerResources/js/Scheduler/sgCalendarMonthEvent.directive.js
+++ b/UI/WebServerResources/js/Scheduler/sgCalendarMonthEvent.directive.js
@@ -46,13 +46,13 @@
         '  {{ '+p+'block.component.summary }}',
         '  <span class="icons">',
         //   Component is reccurent
-        '    <md-icon ng-if="'+p+'block.component.occurrenceId" class="material-icons icon-repeat"></md-icon>',
+        '    <md-icon ng-if="'+p+'block.component.occurrenceId">repeat</md-icon>',
         //   Component has an alarm
-        '    <md-icon ng-if="'+p+'block.component.c_nextalarm" class="material-icons icon-alarm"></md-icon>',
+        '    <md-icon ng-if="'+p+'block.component.c_nextalarm">alarm</md-icon>',
         //   Component is confidential
-        '    <md-icon ng-if="'+p+'block.component.c_classification == 2" class="material-icons icon-visibility-off"></md-icon>',
+        '    <md-icon ng-if="'+p+'block.component.c_classification == 2">visibility_off</md-icon>',
         //   Component is private
-        '    <md-icon ng-if="'+p+'block.component.c_classification == 1" class="material-icons icon-vpn-key"></md-icon>',
+        '    <md-icon ng-if="'+p+'block.component.c_classification == 1">vpn_key</md-icon>',
         '  </span>',
         '</div>'
       ].join('');
diff --git a/UI/WebServerResources/scss/components/icon/icon.scss b/UI/WebServerResources/scss/components/icon/icon.scss
index c58f1b04f..abc8b1b05 100644
--- a/UI/WebServerResources/scss/components/icon/icon.scss
+++ b/UI/WebServerResources/scss/components/icon/icon.scss
@@ -87,79 +87,28 @@ md-icon {
   &.md-flip {
     transform: scaleY(-1);
   }
-//   &.icon-add:before {
-//     content: "\e317";
-  //   }
-  &.icon-alarm:before {
-    content: "\e855";
-  }
   &.icon-delegated:before,
   &.icon-arrow-forward:before {
-    content: "\e5c8";
+    content: "arrow_forward";
   }
   &.icon-accepted:before,
   &.icon-check:before {
-    content: "\e5ca";
-  }
-  &.icon-clear:before {
-    content: "\e14c";
-  }
-  &.icon-contacts:before {
-    content: "\e0ba";
-  }
-  &.icon-event:before {
-    content: "\e878";
-  }
-  &.icon-expand-less:before {
-    content: "\e5ce";
-  }
-  &.icon-expand-more:before {
-    content: "\e5cf";
-  }
-  &.icon-fullscreen:before {
-    content: "\e5d0";
-  }
-  &.icon-fullscreen-exit:before {
-    content: "\e5d1";
+    content: "check";
   }
   &.icon-needs-action:before,
   &.icon-help:before {
-    content: "\e887";
+    content: "help";
   }
   &.icon-more-horiz:before {
     content: "\e5d3";
   }
   &.icon-tentative:before,
   &.icon-person:before {
-    content: "\e7fd";
+    content: "person";
   }
-//  &.icon_public:before {
-//    content: "\e80b";
-//  }
   &.icon-declined:before,
   &.icon-remove-circle:before {
-    content: "\e15c";
-  }
-  &.icon-repeat:before {
-    content: "\e040";
-  }
-  &.icon-search:before {
-    content: "\e8b6";
-  }
-  &.icon-star:before {
-    content: "\e838";
-  }
-  &.icon-star-border:before {
-    content: "\e83a";
-  }
-  &.icon-stop:before {
-    content: "\e047";
-  }
-  &.icon-visibility-off:before {
-    content: "\e8f5";
-  }
-  &.icon-vpn-key:before {
-    content: "\e0da";
+    content: "remove_circle";
   }
 }