You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/03/31 14:25:50 UTC

[royale-asjs] branch develop updated: tour-de-jewel: Change references of FontIcon to MaterialIcon and remove "material=true". Important: Now FontIcon is deprecated and will be removed soon. As in CSS we change "iconClass" to MaterialIcon for IconButtonBar and subclasses

This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new a2c8f39  tour-de-jewel: Change references of FontIcon to MaterialIcon and remove "material=true". Important: Now FontIcon is deprecated and will be removed soon. As in CSS we change "iconClass" to MaterialIcon for IconButtonBar and subclasses
a2c8f39 is described below

commit a2c8f39034ad4f048c6742f30fc530dfca17ec32
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Mar 31 16:25:44 2020 +0200

    tour-de-jewel: Change references of FontIcon to MaterialIcon and remove "material=true". Important: Now FontIcon is deprecated and will be removed soon. As in CSS we change "iconClass" to MaterialIcon for IconButtonBar and subclasses
---
 .../src/main/resources/jewel-example-styles.css    |  2 +-
 .../src/main/royale/ButtonBarPlayGround.mxml       | 10 +++----
 .../src/main/royale/ButtonPlayGround.mxml          | 34 +++++++++++-----------
 .../src/main/royale/CardPlayGround.mxml            |  8 ++---
 .../src/main/royale/ComboBoxPlayGround.mxml        |  4 +--
 .../src/main/royale/DataGridPlayGround.mxml        | 22 +++++++-------
 .../TourDeJewel/src/main/royale/MainContent.mxml   | 18 ++++++------
 .../src/main/royale/MiscelaneaPlayGound.mxml       | 16 +++++-----
 .../src/main/royale/TablePlayGround.mxml           | 10 +++----
 .../src/main/royale/TextInputPlayGround.mxml       | 10 +++----
 .../src/main/royale/WelcomeSection.mxml            |  2 +-
 .../src/main/royale/WizardPlayGround.mxml          |  4 +--
 .../AdvancedIconListItemRenderer.mxml              |  4 +--
 .../itemRenderers/IconDataGridItemRenderer.mxml    |  2 +-
 .../royale/itemRenderers/IconListItemRenderer.mxml |  2 +-
 .../NavigationGroupExampleItemRenderer.mxml        |  4 +--
 .../NavigationIconLinkItemRenderer.mxml            |  2 +-
 .../itemRenderers/SimpleIconListItemRenderer.mxml  |  2 +-
 .../TabBarHorizontalIconItemRenderer.mxml          |  2 +-
 .../TabBarVerticalIconItemRenderer.mxml            |  2 +-
 .../TableCellCloseIconItemRenderer.mxml            |  2 +-
 .../itemRenderers/TableStyleListItemRenderer.mxml  |  2 +-
 22 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css b/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
index 11e74af..038412c 100644
--- a/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
+++ b/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
@@ -24,7 +24,7 @@
 
 j|IconButtonBar 
 {
-    iconClass: ClassReference("org.apache.royale.icons.FontIcon")
+    iconClass: ClassReference("org.apache.royale.icons.MaterialIcon")
 }
 
 .tableStyle
diff --git a/examples/jewel/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
index 4b5f129..df0aeb2 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
@@ -122,19 +122,19 @@ limitations under the License.
 			<j:Card>
 				<html:H3 text="Jewel IconButtonBar"/>
 
-				<j:Label html="Is a ButtonBar with IconButtons as item renderers. At Application level CSS you need to specify the icon class with a declaration for &lt;strong>j|IconButtonBar&lt;/strong> like this: &lt;strong>iconClass: ClassReference('org.apache.royale.icons.FontIcon')&lt;/strong>"
+				<j:Label html="Is a ButtonBar with IconButtons as item renderers. At Application level CSS you need to specify the icon class with a declaration for &lt;strong>j|IconButtonBar&lt;/strong> like this: &lt;strong>iconClass: ClassReference('org.apache.royale.icons.MaterialIcon')&lt;/strong>"
 				 		multiline="true"/>
 
 				<html:H4 text="Width 100% and emphasized color"/>
 
 				<j:IconButtonBar localId="ibb" change="ibb_label.text = ibb.selectedItem.label + ' (icon: ' + ibb.selectedItem.icon + ')'"
-					emphasis="primary" width="100%" material="true"
+					emphasis="primary" width="100%" 
 					dataProvider="{listModel.iconButtonData}"/>
 				
 				<html:H4 text="No Width and icons to the right"/>
 
 				<j:IconButtonBar localId="ibb2" change="ibb_label.text = ibb2.selectedItem.label + ' (icon: ' + ibb2.selectedItem.icon + ')'"
-					emphasis="secondary" rightPosition="true" material="true" iconField="icon"
+					emphasis="secondary" rightPosition="true"  iconField="icon"
 					dataProvider="{listModel.iconButtonData}"/>
 				
 				<j:Label localId="ibb_label"/>
@@ -152,7 +152,7 @@ limitations under the License.
 				<j:ToggleButtonBar localId="tbb" 
 					change="tbbChangeHandler(event)"
 					selectedIndex="2"
-					emphasis="primary" width="100%" material="true"
+					emphasis="primary" width="100%" 
 					dataProvider="{listModel.iconButtonData}"/>
 				
 				<html:H4 text="No Width and icons to the right, selectedIndex is 0"/>
@@ -160,7 +160,7 @@ limitations under the License.
 				<j:ToggleButtonBar localId="tbb2" 
 					change="tbbChangeHandler(event)"
 					selectedIndex="0"
-					emphasis="emphasized" rightPosition="true" material="true" iconField="icon"
+					emphasis="emphasized" rightPosition="true"  iconField="icon"
 					dataProvider="{listModel.iconButtonData}"/>
 				
 				<j:Label localId="tbb_label"/> 
diff --git a/examples/jewel/TourDeJewel/src/main/royale/ButtonPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
index 31669af..501c048 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
@@ -208,24 +208,24 @@ limitations under the License.
 				<j:CardPrimaryContent>
 					<j:IconButton text="print" emphasis="primary">
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.PRINT}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.PRINT}" />
 						</j:icon>
 					</j:IconButton>
 					<j:IconButton emphasis="secondary">
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.FACE}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.FACE}" />
 						</j:icon>
 					</j:IconButton>
 					<j:IconButton text="wifi" emphasis="emphasized">
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.WIFI}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.WIFI}" />
 						</j:icon>
 					</j:IconButton>
 
 					<j:HGroup gap="3" itemsVerticalAlign="itemsCenter">
 						<j:IconButton localId="ib_lor" text="Do not disturb">
 							<j:icon>
-								<js:FontIcon text="{MaterialIconType.DO_NOT_DISTURB}" material="true"/>
+								<js:MaterialIcon text="{MaterialIconType.DO_NOT_DISTURB}" />
 							</j:icon>
 						</j:IconButton>
 						<j:CheckBox text="rightPosition" change="ib_lor.rightPosition = !ib_lor.rightPosition"/>
@@ -242,24 +242,24 @@ limitations under the License.
 				<j:CardPrimaryContent>
 					<j:IconButton text="print" emphasis="primary" outlined="true">
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.PRINT}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.PRINT}" />
 						</j:icon>
 					</j:IconButton>
 					<j:IconButton emphasis="secondary" outlined="true">
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.FACE}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.FACE}" />
 						</j:icon>
 					</j:IconButton>
 					<j:IconButton text="wifi" emphasis="emphasized" outlined="true">
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.WIFI}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.WIFI}" />
 						</j:icon>
 					</j:IconButton>
 					
 					<j:HGroup gap="3" itemsVerticalAlign="itemsCenter">
 						<j:IconButton localId="ib_lor2" text="Do not disturb" outlined="true">
 							<j:icon>
-								<js:FontIcon text="{MaterialIconType.DO_NOT_DISTURB}" material="true"/>
+								<js:MaterialIcon text="{MaterialIconType.DO_NOT_DISTURB}" />
 							</j:icon>
 						</j:IconButton>
 						<j:CheckBox text="rightPosition" change="ib_lor2.rightPosition = !ib_lor2.rightPosition"/>
@@ -276,24 +276,24 @@ limitations under the License.
 				<j:CardPrimaryContent>
 					<j:IconButton text="print" emphasis="primary" unboxed="true">
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.PRINT}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.PRINT}" />
 						</j:icon>
 					</j:IconButton>
 					<j:IconButton emphasis="secondary" unboxed="true">
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.FACE}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.FACE}" />
 						</j:icon>
 					</j:IconButton>
 					<j:IconButton text="wifi" emphasis="emphasized" unboxed="true">
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.WIFI}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.WIFI}"/>
 						</j:icon>
 					</j:IconButton>
 					
 					<j:HGroup gap="3" itemsVerticalAlign="itemsCenter">
 						<j:IconButton localId="ib_lor3" text="Do not disturb" unboxed="true">
 							<j:icon>
-								<js:FontIcon text="{MaterialIconType.DO_NOT_DISTURB}" material="true"/>
+								<js:MaterialIcon text="{MaterialIconType.DO_NOT_DISTURB}" />
 							</j:icon>
 						</j:IconButton>
 						<j:CheckBox text="rightPosition" change="ib_lor3.rightPosition = !ib_lor3.rightPosition"/>
@@ -357,7 +357,7 @@ limitations under the License.
 					</j:ToggleButton>
 					<j:ToggleButton>
 						<j:icon>
-							<js:ToggleFontIcon text="{MaterialIconType.VISIBILITY}" selectedText="{MaterialIconType.VISIBILITY_OFF}" material="true"/>
+							<js:MaterialToggleIcon text="{MaterialIconType.VISIBILITY}" selectedText="{MaterialIconType.VISIBILITY_OFF}" />
 						</j:icon>
 						<j:beads>
 							<j:ToolTip toolTip="show/hide FooterBar"/>
@@ -365,7 +365,7 @@ limitations under the License.
 					</j:ToggleButton>
 					<j:ToggleButton text="Icon and Text" selectedText="Icon and Text" emphasis="{StyledUIBase.SECONDARY}">
 						<j:icon>
-							<js:ToggleFontIcon text="{MaterialIconType.VISIBILITY}" selectedText="{MaterialIconType.VISIBILITY_OFF}" material="true"/>
+							<js:MaterialToggleIcon text="{MaterialIconType.VISIBILITY}" selectedText="{MaterialIconType.VISIBILITY_OFF}"/>
 						</j:icon>
 						<j:beads>
 							<j:ToolTip toolTip="show/hide FooterBar"/>
@@ -374,19 +374,19 @@ limitations under the License.
 					<j:ToggleButton outlined="true" emphasis="secondary"
                             text="Show it" selected="true">
                             <j:icon>
-                                <js:ToggleFontIcon text="{MaterialIconType.VISIBILITY_OFF}" selectedText="{MaterialIconType.VISIBILITY}" material="true"/>
+                                <js:MaterialToggleIcon text="{MaterialIconType.VISIBILITY_OFF}" selectedText="{MaterialIconType.VISIBILITY}" />
                             </j:icon>
                         </j:ToggleButton>
 					<j:ToggleButton unboxed="true" emphasis="primary"
                             text="Show it" selected="true">
                             <j:icon>
-                                <js:ToggleFontIcon text="{MaterialIconType.VISIBILITY_OFF}" selectedText="{MaterialIconType.VISIBILITY}" material="true"/>
+                                <js:MaterialToggleIcon text="{MaterialIconType.VISIBILITY_OFF}" selectedText="{MaterialIconType.VISIBILITY}" />
                             </j:icon>
                         </j:ToggleButton>
 					<j:HGroup gap="3" itemsVerticalAlign="itemsCenter">
 						<j:ToggleButton localId="tb_lor" text="No Print" selectedText="Print">
 							<j:icon>
-								<js:ToggleFontIcon text="{MaterialIconType.PRINT_DISABLED}" selectedText="{MaterialIconType.PRINT}" material="true"/>
+								<js:MaterialToggleIcon text="{MaterialIconType.PRINT_DISABLED}" selectedText="{MaterialIconType.PRINT}" />
 							</j:icon>
 						</j:ToggleButton>
 						<j:CheckBox selected="true" text="rightPosition" change="tb_lor.rightPosition = !tb_lor.rightPosition"/>
diff --git a/examples/jewel/TourDeJewel/src/main/royale/CardPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/CardPlayGround.mxml
index 9220dee..7fc55d7 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/CardPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/CardPlayGround.mxml
@@ -111,12 +111,12 @@ limitations under the License.
 				<j:CardActions itemsHorizontalAlign="itemsRight">
 					<j:IconButton text="Reply" emphasis="primary" outlined="true">
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.REPLY}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.REPLY}" />
 						</j:icon>
 					</j:IconButton>
 					<j:IconButton text="Cancel" outlined="true">
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.CANCEL}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.CANCEL}" />
 						</j:icon>
 					</j:IconButton>
 				</j:CardActions>
@@ -132,12 +132,12 @@ limitations under the License.
 					<j:BarSection itemsHorizontalAlign="itemsRight">
 						<j:IconButton emphasis="primary" unboxed="true">
 							<j:icon>
-								<js:FontIcon text="{MaterialIconType.SHARE}" material="true"/>
+								<js:MaterialIcon text="{MaterialIconType.SHARE}" />
 							</j:icon>
 						</j:IconButton>
 						<j:IconButton unboxed="true">
 							<j:icon>
-								<js:FontIcon text="{MaterialIconType.MORE_VERT}" material="true"/>
+								<js:MaterialIcon text="{MaterialIconType.MORE_VERT}" />
 							</j:icon>
 						</j:IconButton>
 					</j:BarSection>
diff --git a/examples/jewel/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml
index 1667c51..4bd22d9 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml
@@ -90,7 +90,7 @@ limitations under the License.
 					<j:BarSection itemsHorizontalAlign="itemsRight">
 						<j:IconButton unboxed="true" click="assignNewData(watchmenComboBox)">
 							<j:icon>
-								<js:FontIcon text="{MaterialIconType.SETTINGS_BACKUP_RESTORE}" material="true"/>
+								<js:MaterialIcon text="{MaterialIconType.SETTINGS_BACKUP_RESTORE}" />
 							</j:icon>
 							<j:beads>
 								<j:ToolTip toolTip="Assign new data"/>
@@ -131,7 +131,7 @@ limitations under the License.
 					<j:BarSection itemsHorizontalAlign="itemsRight">
 						<j:IconButton unboxed="true" click="assignNewData(avengersComboBox)">
 							<j:icon>
-								<js:FontIcon text="{MaterialIconType.SETTINGS_BACKUP_RESTORE}" material="true"/>
+								<js:MaterialIcon text="{MaterialIconType.SETTINGS_BACKUP_RESTORE}" />
 							</j:icon>
 							<j:beads>
 								<j:ToolTip toolTip="Assign new data"/>
diff --git a/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
index 4c8b917..9d0d460 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
@@ -197,7 +197,7 @@ limitations under the License.
 							<j:ToolTip toolTip="Clear Data"/>
 						</j:beads>
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.CLEAR}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.CLEAR}" />
 						</j:icon>
 					</j:IconButton>
 					<j:IconButton click="loadDataProvider(dg1)" emphasis="primary" outlined="true">
@@ -205,7 +205,7 @@ limitations under the License.
 							<j:ToolTip toolTip="Load Data"/>
 						</j:beads>
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.VIEW_HEADLINE}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.VIEW_HEADLINE}" />
 						</j:icon>
 					</j:IconButton>
 				</j:CardActions>
@@ -247,7 +247,7 @@ limitations under the License.
 							<j:ToolTip toolTip="Clear Data"/>
 						</j:beads>
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.CLEAR}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.CLEAR}" />
 						</j:icon>
 					</j:IconButton>
 					<j:IconButton click="loadDataProvider(dg2)" emphasis="primary" outlined="true">
@@ -255,7 +255,7 @@ limitations under the License.
 							<j:ToolTip toolTip="Load Data"/>
 						</j:beads>
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.VIEW_HEADLINE}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.VIEW_HEADLINE}" />
 						</j:icon>
 					</j:IconButton>
 				</j:CardActions>
@@ -295,7 +295,7 @@ limitations under the License.
 							<j:ToolTip toolTip="Change Column Labels"/>
 						</j:beads>
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.RESTORE_PAGE}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.RESTORE_PAGE}" />
 						</j:icon>
 					</j:IconButton>
 					<j:IconButton click="clearBindedDataProvider(dg3)" outlined="true">
@@ -303,7 +303,7 @@ limitations under the License.
 							<j:ToolTip toolTip="Clear Data"/>
 						</j:beads>
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.CLEAR_ALL}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.CLEAR_ALL}" />
 						</j:icon>
 					</j:IconButton>
 					<j:IconButton click="loadBindedDataProvider(dg3)" emphasis="primary" outlined="true">
@@ -311,7 +311,7 @@ limitations under the License.
 							<j:ToolTip toolTip="Load Data"/>
 						</j:beads>
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.AUTORENEW}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.AUTORENEW}" />
 						</j:icon>
 					</j:IconButton>
 				</j:CardActions>
@@ -351,7 +351,7 @@ limitations under the License.
 							<j:ToolTip toolTip="Add Row"/>
 						</j:beads>
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.ADD}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.ADD}" />
 						</j:icon>
 					</j:IconButton>
 					<j:IconButton click="removeFirstRow(dg4)" outlined="true">
@@ -359,7 +359,7 @@ limitations under the License.
 							<j:ToolTip toolTip="Remove First Row"/>
 						</j:beads>
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.REMOVE}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.REMOVE}" />
 						</j:icon>
 					</j:IconButton>
 					<j:IconButton click="updateFirstRow(dg4)" emphasis="primary" outlined="true">
@@ -367,7 +367,7 @@ limitations under the License.
 							<j:ToolTip toolTip="Update First Row"/>
 						</j:beads>
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.UPDATE}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.UPDATE}" />
 						</j:icon>
 					</j:IconButton>
 					<j:IconButton click="removeAllRows(dg4)" emphasis="primary" outlined="true">
@@ -375,7 +375,7 @@ limitations under the License.
 							<j:ToolTip toolTip="Remove all rows"/>
 						</j:beads>
 						<j:icon>
-							<js:FontIcon text="{MaterialIconType.DELETE_FOREVER}" material="true"/>
+							<js:MaterialIcon text="{MaterialIconType.DELETE_FOREVER}" />
 						</j:icon>
 					</j:IconButton>
 				</j:CardActions>
diff --git a/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml b/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
index 9ced58e..655b0bc 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
@@ -214,7 +214,7 @@ limitations under the License.
                 <j:BarSection>
                     <j:IconButton>
                         <j:icon>
-                            <js:FontIcon text="{MaterialIconType.FEEDBACK}" material="true"/>
+                            <js:MaterialIcon text="{MaterialIconType.FEEDBACK}" />
                         </j:icon>
                     </j:IconButton>
                 </j:BarSection>
@@ -231,7 +231,7 @@ limitations under the License.
                         <j:Badge localId="badge" overlap="true"/>
                     </j:beads>
                     <j:icon>
-                        <js:FontIcon text="{MaterialIconType.ACCOUNT_BALANCE}" material="true"/>
+                        <js:MaterialIcon text="{MaterialIconType.ACCOUNT_BALANCE}" />
                     </j:icon>
                 </j:IconButton>
                 <j:IconButton click="popup.open = !popup.open">
@@ -239,7 +239,7 @@ limitations under the License.
                         <j:Badge text="5" emphasis="secondary" subindex="true" overlap="true"/>
                     </j:beads>
                     <j:icon>
-                        <js:FontIcon text="{MaterialIconType.DATA_USAGE}" material="true"/>
+                        <js:MaterialIcon text="{MaterialIconType.DATA_USAGE}" />
                     </j:icon>
                 </j:IconButton>
                 <j:PopUp localId="popup" closePopUp="popupFormContent.formValidator.removeAllErrorTips()">
@@ -255,7 +255,7 @@ limitations under the License.
                         <j:Badge text="27" emphasis="primary" preindex="true" overlap="true"/>
                     </j:beads>
                     <j:icon>
-                        <js:FontIcon text="{MaterialIconType.ADD_ALARM}" material="true"/>
+                        <js:MaterialIcon text="{MaterialIconType.ADD_ALARM}" />
                     </j:icon>
                 </j:IconButton>
                 <j:IconButton>
@@ -263,7 +263,7 @@ limitations under the License.
                         <j:Badge text="209" emphasis="emphasized" subindex="true" preindex="true" overlap="true"/>
                     </j:beads>
                     <j:icon>
-                        <js:FontIcon text="{MaterialIconType.ANNOUNCEMENT}" material="true"/>
+                        <js:MaterialIcon text="{MaterialIconType.ANNOUNCEMENT}" />
                     </j:icon>
                 </j:IconButton>
             </j:BarSection>
@@ -278,7 +278,7 @@ limitations under the License.
                         <j:ResponsiveVisibility desktopVisible="false" wideScreenVisible="false" />
                     </j:beads>
                     <j:icon>
-                        <js:FontIcon text="{MaterialIconType.MENU}" material="true"/>
+                        <js:MaterialIcon text="{MaterialIconType.MENU}" />
                     </j:icon>
                 </j:IconButton>
                 <j:BarTitle text="Apache Royale Tour de Jewel"/>
@@ -289,7 +289,7 @@ limitations under the License.
                         <j:ToolTip toolTip="Detect Orientation"/>
                     </j:beads>
                     <j:icon>
-                        <js:ToggleFontIcon text="{MaterialIconType.SCREEN_LOCK_ROTATION}" selectedText="{MaterialIconType.SCREEN_ROTATION}" material="true"/>
+                        <js:MaterialToggleIcon text="{MaterialIconType.SCREEN_LOCK_ROTATION}" selectedText="{MaterialIconType.SCREEN_ROTATION}" />
                     </j:icon>
                 </j:ToggleButton>
                 <j:ToggleButton click="footerbar.visible = !footerbar.visible">
@@ -297,7 +297,7 @@ limitations under the License.
                         <j:ToolTip toolTip="show/hide FooterBar"/>
                     </j:beads>
                     <j:icon>
-                        <js:ToggleFontIcon text="{MaterialIconType.VISIBILITY}" selectedText="{MaterialIconType.VISIBILITY_OFF}" material="true"/>
+                        <js:MaterialToggleIcon text="{MaterialIconType.VISIBILITY}" selectedText="{MaterialIconType.VISIBILITY_OFF}" />
                     </j:icon>
                 </j:ToggleButton>
                 <j:ToggleButton click="toggleTopAppBarFixed()">
@@ -305,7 +305,7 @@ limitations under the License.
                         <j:ToolTip toolTip="Lock(fix) or Unlock the TopBar"/>
                     </j:beads>
                     <j:icon>
-                        <js:ToggleFontIcon text="{MaterialIconType.LOCK}" selectedText="{MaterialIconType.LOCK_OPEN}" material="true"/>
+                        <js:MaterialToggleIcon text="{MaterialIconType.LOCK}" selectedText="{MaterialIconType.LOCK_OPEN}" />
                     </j:icon>
                 </j:ToggleButton>
             </j:BarSection>
diff --git a/examples/jewel/TourDeJewel/src/main/royale/MiscelaneaPlayGound.mxml b/examples/jewel/TourDeJewel/src/main/royale/MiscelaneaPlayGound.mxml
index 1d27af2..c9fc92e 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/MiscelaneaPlayGound.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/MiscelaneaPlayGound.mxml
@@ -42,13 +42,13 @@ limitations under the License.
             <j:Card>
                 <html:H3 text="Jewel Icons Sizes"/>
 
-                <js:FontIcon text="{MaterialIconType.FACE}" material="true" size="18"/>
+                <js:MaterialIcon text="{MaterialIconType.FACE}"  size="18"/>
                 <j:Label text="18px"/>
-                <js:FontIcon text="{MaterialIconType.FACE}" material="true" size="24"/>
+                <js:MaterialIcon text="{MaterialIconType.FACE}"  size="24"/>
                 <j:Label text="24px (default)"/>
-                <js:FontIcon text="{MaterialIconType.FACE}" material="true" size="36"/>
+                <js:MaterialIcon text="{MaterialIconType.FACE}"  size="36"/>
                 <j:Label text="36px"/>
-                <js:FontIcon text="{MaterialIconType.FACE}" material="true" size="48"/>
+                <js:MaterialIcon text="{MaterialIconType.FACE}"  size="48"/>
                 <j:Label text="48px"/>
             </j:Card>
         </j:GridCell>
@@ -57,13 +57,13 @@ limitations under the License.
             <j:Card>
                 <html:H3 text="Jewel Icons Dark / Light"/>
 
-                <js:FontIcon text="{MaterialIconType.FACE}" material="true" dark="true"/>
+                <js:MaterialIcon text="{MaterialIconType.FACE}"  dark="true"/>
                 <j:Label text="dark"/>
-                <js:FontIcon text="{MaterialIconType.FACE}" material="true" dark="true" inactive="true"/>
+                <js:MaterialIcon text="{MaterialIconType.FACE}"  dark="true" inactive="true"/>
                 <j:Label text="dark - inactive"/>
-                <js:FontIcon text="{MaterialIconType.FACE}" material="true" light="true"/>
+                <js:MaterialIcon text="{MaterialIconType.FACE}"  light="true"/>
                 <j:Label text="light"/>
-                <js:FontIcon text="{MaterialIconType.FACE}" material="true" light="true" inactive="true"/>
+                <js:MaterialIcon text="{MaterialIconType.FACE}"  light="true" inactive="true"/>
                 <j:Label text="light - inactive"/>
             </j:Card>
         </j:GridCell>
diff --git a/examples/jewel/TourDeJewel/src/main/royale/TablePlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/TablePlayGround.mxml
index a3c85a7..fcc1a89 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/TablePlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/TablePlayGround.mxml
@@ -71,7 +71,7 @@ limitations under the License.
 					<j:TBody>
 						<j:TableRow>
 							<j:TableCell>
-								<js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
+								<js:MaterialIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" />
 							</j:TableCell>
 							<j:TableCell expandRows="2">
 								<j:Label text="Some text in two rows" multiline="true"/>
@@ -93,7 +93,7 @@ limitations under the License.
 						</j:TableRow>
 						<j:TableRow>
 							<j:TableCell>
-								<js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
+								<js:MaterialIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" />
 							</j:TableCell>
 
 							<j:TableCell>
@@ -113,7 +113,7 @@ limitations under the License.
 						</j:TableRow>
 						<j:TableRow>
 							<j:TableCell>
-								<js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
+								<js:MaterialIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" />
 							</j:TableCell>
 							<j:TableCell>
 								<j:Label text="More text 2" />
@@ -135,7 +135,7 @@ limitations under the License.
 						</j:TableRow>
 						<j:TableRow>
 							<j:TableCell>
-								<js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
+								<js:MaterialIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" />
 							</j:TableCell>
 							<j:TableCell>
 								<!-- By using a Group within a cell you have better control of the
@@ -173,7 +173,7 @@ limitations under the License.
 											<j:TextPrompt prompt="Search..."/>
 										</j:beads>
 										<j:icon>
-											<js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+											<js:MaterialIcon text="{MaterialIconType.SEARCH}" />
 										</j:icon>
 									</j:IconTextInput>
 									<j:Button text="SEARCH" emphasis="{StyledUIBase.PRIMARY}"/>
diff --git a/examples/jewel/TourDeJewel/src/main/royale/TextInputPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/TextInputPlayGround.mxml
index f266f6c..69fe4ed 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/TextInputPlayGround.mxml
@@ -211,7 +211,7 @@ limitations under the License.
 
 				<j:IconTextInput text="Searching something">
 					<j:icon>
-						<js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+						<js:MaterialIcon text="{MaterialIconType.SEARCH}" />
 					</j:icon>
 				</j:IconTextInput>
 
@@ -220,7 +220,7 @@ limitations under the License.
 						<j:TextPrompt prompt="Search..."/>
 					</j:beads>
 					<j:icon>
-						<js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+						<js:MaterialIcon text="{MaterialIconType.SEARCH}" />
 					</j:icon>
 				</j:IconTextInput>
 
@@ -230,7 +230,7 @@ limitations under the License.
 						<j:Disabled/>
 					</j:beads>
 					<j:icon>
-						<js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+						<js:MaterialIcon text="{MaterialIconType.SEARCH}" />
 					</j:icon>
 				</j:IconTextInput>
 
@@ -240,7 +240,7 @@ limitations under the License.
 						<j:Disabled/>
 					</j:beads>
 					<j:icon>
-						<js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+						<js:MaterialIcon text="{MaterialIconType.SEARCH}" />
 					</j:icon>
 				</j:IconTextInput>
 
@@ -249,7 +249,7 @@ limitations under the License.
 						<j:SizeControl size="xlarge"/>
 					</j:beads>
 					<j:icon>
-						<js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+						<js:MaterialIcon text="{MaterialIconType.SEARCH}" />
 					</j:icon>
 				</j:IconTextInput>
 			</j:Card>
diff --git a/examples/jewel/TourDeJewel/src/main/royale/WelcomeSection.mxml b/examples/jewel/TourDeJewel/src/main/royale/WelcomeSection.mxml
index 384171a..4303427 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/WelcomeSection.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/WelcomeSection.mxml
@@ -136,7 +136,7 @@ limitations under the License.
                     <j:SizeControl size="xlarge"/>
                 </j:beads>
                 <j:icon>
-                    <js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+                    <js:MaterialIcon text="{MaterialIconType.SEARCH}" />
                 </j:icon>
             </j:IconTextInput>
             <j:Button text="Search" emphasis="secondary">
diff --git a/examples/jewel/TourDeJewel/src/main/royale/WizardPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/WizardPlayGround.mxml
index 79e2222..7e56642 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/WizardPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/WizardPlayGround.mxml
@@ -72,7 +72,7 @@ limitations under the License.
 						<j:Group>
 							<j:IconButton emphasis="{StyledUIBase.SECONDARY}">
 								<j:icon>
-									<js:FontIcon text="{MaterialIconType.KEYBOARD_ARROW_LEFT}" material="true" size="48"/>
+									<js:MaterialIcon text="{MaterialIconType.KEYBOARD_ARROW_LEFT}"  size="48"/>
 								</j:icon>
 							</j:IconButton>
 						</j:Group>
@@ -82,7 +82,7 @@ limitations under the License.
 						<j:Group>
 							<j:IconButton emphasis="{StyledUIBase.SECONDARY}">
 								<j:icon>
-									<js:FontIcon text="{MaterialIconType.KEYBOARD_ARROW_RIGHT}" material="true" size="48"/>
+									<js:MaterialIcon text="{MaterialIconType.KEYBOARD_ARROW_RIGHT}"  size="48"/>
 								</j:icon>
 							</j:IconButton>
 						</j:Group>
diff --git a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/AdvancedIconListItemRenderer.mxml b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/AdvancedIconListItemRenderer.mxml
index 47185f4..5ce2503 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/AdvancedIconListItemRenderer.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/AdvancedIconListItemRenderer.mxml
@@ -85,8 +85,8 @@ limitations under the License.
         <js:ItemRendererDataBinding/>
     </j:beads>
 
-    <js:FontIcon text="{iconListItem ? iconListItem.icon : ''}"
-                material="true"
+    <js:MaterialIcon text="{iconListItem ? iconListItem.icon : ''}"
+                
                 visible="{iconListItem ? iconListItem.icon != null : false}"
                 className="{colorClass}"
                 click="clickCloseButton()"/>
diff --git a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconDataGridItemRenderer.mxml b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconDataGridItemRenderer.mxml
index 18eb319..299fe3f 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconDataGridItemRenderer.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconDataGridItemRenderer.mxml
@@ -50,7 +50,7 @@ limitations under the License.
         <j:HorizontalCenteredLayout/>
     </j:beads>
 
-    <js:FontIcon text="{iconList ? iconList.icon : ''}" material="true"
+    <js:MaterialIcon text="{iconList ? iconList.icon : ''}" 
         visible="{iconList ? iconList.icon != null : false}"
         click="clickCloseButton(event)"/>
 
diff --git a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconListItemRenderer.mxml b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconListItemRenderer.mxml
index d9c7b69..d22dfc0 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconListItemRenderer.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconListItemRenderer.mxml
@@ -60,7 +60,7 @@ limitations under the License.
         <js:ToolTipRemovalWhenItemRemoved tooltip="{tt}"/>
     </j:beads>
 
-    <js:FontIcon text="{iconList ? iconList.icon : ''}" material="true" visible="{iconList ? iconList.icon != null : false}" click="clickCloseButton()"/>
+    <js:MaterialIcon text="{iconList ? iconList.icon : ''}"  visible="{iconList ? iconList.icon != null : false}" click="clickCloseButton()"/>
 
     <j:Label html="{text}" multiline="true"/>
 
diff --git a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml
index 5f8bec9..182238e 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml
@@ -81,11 +81,11 @@ limitations under the License.
         <js:ItemRendererDataBinding />
     </j:beads>
 
-    <js:FontIcon text="{navlink ? navlink.icon : ''}" material="true" visible="{navlink ? navlink.icon != null : false}"/>
+    <js:MaterialIcon text="{navlink ? navlink.icon : ''}"  visible="{navlink ? navlink.icon != null : false}"/>
 
     <html:Span className="navigation-section-title" text="{text}"/>
     
-    <js:FontIcon text="{open? MaterialIconType.EXPAND_LESS: MaterialIconType.EXPAND_MORE}" material="true" className="hint" 
+    <js:MaterialIcon text="{open? MaterialIconType.EXPAND_LESS: MaterialIconType.EXPAND_MORE}"  className="hint" 
                 visible="{navlink.subMenu != null}" />
 
 </j:CollapsibleNavigationSectionRenderer>
diff --git a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationIconLinkItemRenderer.mxml b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationIconLinkItemRenderer.mxml
index d95520e..f9a6644 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationIconLinkItemRenderer.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationIconLinkItemRenderer.mxml
@@ -39,7 +39,7 @@ limitations under the License.
         <js:ItemRendererDataBinding />
     </j:beads>
 
-    <js:FontIcon text="{navlink ? navlink.icon : ''}" material="true" visible="{navlink ? navlink.icon != null : false}"/>
+    <js:MaterialIcon text="{navlink ? navlink.icon : ''}"  visible="{navlink ? navlink.icon != null : false}"/>
 
     <html:Span text="{navlink ? navlink.label : ''}"/>
 
diff --git a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/SimpleIconListItemRenderer.mxml b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/SimpleIconListItemRenderer.mxml
index b0613b1..359edaa 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/SimpleIconListItemRenderer.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/SimpleIconListItemRenderer.mxml
@@ -39,7 +39,7 @@ limitations under the License.
     </j:beads>
 
     <j:HGroup gap="6" itemsVerticalAlign="itemsCenter">
-        <js:FontIcon text="{iconList.icon}" material="true" visible="{iconList.icon != null}"/>
+        <js:MaterialIcon text="{iconList.icon}"  visible="{iconList.icon != null}"/>
         <j:Label html="{text}"/>
     </j:HGroup>
 
diff --git a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml
index a7f92f4..26f8828 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml
@@ -40,7 +40,7 @@ limitations under the License.
     </j:beads>
 
     <j:HGroup gap="4" itemsVerticalAlign="itemsCenter">
-        <js:FontIcon text="{tabButton ? tabButton.icon : ''}" material="true" 
+        <js:MaterialIcon text="{tabButton ? tabButton.icon : ''}"  
                     visible="{tabButton ? tabButton.icon != null : false}"/>
         <html:Span text="{tabButton ? tabButton.label : ''}"/>
     </j:HGroup>
diff --git a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
index f31faaf..b323763 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
@@ -40,7 +40,7 @@ limitations under the License.
     </j:beads>
 
     <j:VGroup itemsHorizontalAlign="itemsCenter">
-        <js:FontIcon text="{tabButton ? tabButton.icon : ''}" material="true" 
+        <js:MaterialIcon text="{tabButton ? tabButton.icon : ''}"  
                     visible="{tabButton ? tabButton.icon != null : false}"/>
         <html:Span text="{tabButton ? tabButton.label : ''}"/>
     </j:VGroup>
diff --git a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
index ddc608a..9bfb4b8 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
@@ -44,7 +44,7 @@ limitations under the License.
 
     <j:IconButton emphasis="primary" width="24" height="24" style="padding: 0px; border-radius: 50%" click="clickCloseButton()">
         <j:icon>
-            <js:FontIcon text="{MaterialIconType.CLOSE}" material="true" size="18"/>
+            <js:MaterialIcon text="{MaterialIconType.CLOSE}"  size="18"/>
         </j:icon>
     </j:IconButton>
 
diff --git a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableStyleListItemRenderer.mxml b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableStyleListItemRenderer.mxml
index 5f0c5e3..b164048 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableStyleListItemRenderer.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableStyleListItemRenderer.mxml
@@ -27,7 +27,7 @@ limitations under the License.
         <j:HorizontalLayout/>
     </ir:beads>
 
-    <js:FontIcon text="{iconList ? iconList.icon : ''}" material="true" visible="{iconList ? iconList.icon != null : false}" click="clickCloseButton()" width="100"/>
+    <js:MaterialIcon text="{iconList ? iconList.icon : ''}"  visible="{iconList ? iconList.icon != null : false}" click="clickCloseButton()" width="100"/>
     <j:Label html="{text}" multiline="true" width="300"/>
     <j:Label html="Third field" multiline="true" width="100"/>
     <j:Label html="Fourth field" multiline="true" width="200"/>


Re: [royale-asjs] branch develop updated: tour-de-jewel: Change references of FontIcon to MaterialIcon and remove "material=true". Important: Now FontIcon is deprecated and will be removed soon. As in CSS we change "iconClass" to MaterialIcon for IconButtonBar and subclasses

Posted by Carlos Rovira <ca...@apache.org>.
Hi Piotr,

right, already done :)

El mar., 31 mar. 2020 a las 16:33, Piotr Zarzycki (<
piotrzarzycki21@gmail.com>) escribió:

> Hi Carlos,
>
> Please make some post about that on users/dev list. :)
>
> Thanks,
> Piotr
>
> wt., 31 mar 2020 o 16:25 <ca...@apache.org> napisał(a):
>
> > This is an automated email from the ASF dual-hosted git repository.
> >
> > carlosrovira pushed a commit to branch develop
> > in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
> >
> >
> > The following commit(s) were added to refs/heads/develop by this push:
> >      new a2c8f39  tour-de-jewel: Change references of FontIcon to
> > MaterialIcon and remove "material=true". Important: Now FontIcon is
> > deprecated and will be removed soon. As in CSS we change "iconClass" to
> > MaterialIcon for IconButtonBar and subclasses
> > a2c8f39 is described below
> >
> > commit a2c8f39034ad4f048c6742f30fc530dfca17ec32
> > Author: Carlos Rovira <ca...@apache.org>
> > AuthorDate: Tue Mar 31 16:25:44 2020 +0200
> >
> >     tour-de-jewel: Change references of FontIcon to MaterialIcon and
> > remove "material=true". Important: Now FontIcon is deprecated and will be
> > removed soon. As in CSS we change "iconClass" to MaterialIcon for
> > IconButtonBar and subclasses
> > ---
> >  .../src/main/resources/jewel-example-styles.css    |  2 +-
> >  .../src/main/royale/ButtonBarPlayGround.mxml       | 10 +++----
> >  .../src/main/royale/ButtonPlayGround.mxml          | 34
> > +++++++++++-----------
> >  .../src/main/royale/CardPlayGround.mxml            |  8 ++---
> >  .../src/main/royale/ComboBoxPlayGround.mxml        |  4 +--
> >  .../src/main/royale/DataGridPlayGround.mxml        | 22 +++++++-------
> >  .../TourDeJewel/src/main/royale/MainContent.mxml   | 18 ++++++------
> >  .../src/main/royale/MiscelaneaPlayGound.mxml       | 16 +++++-----
> >  .../src/main/royale/TablePlayGround.mxml           | 10 +++----
> >  .../src/main/royale/TextInputPlayGround.mxml       | 10 +++----
> >  .../src/main/royale/WelcomeSection.mxml            |  2 +-
> >  .../src/main/royale/WizardPlayGround.mxml          |  4 +--
> >  .../AdvancedIconListItemRenderer.mxml              |  4 +--
> >  .../itemRenderers/IconDataGridItemRenderer.mxml    |  2 +-
> >  .../royale/itemRenderers/IconListItemRenderer.mxml |  2 +-
> >  .../NavigationGroupExampleItemRenderer.mxml        |  4 +--
> >  .../NavigationIconLinkItemRenderer.mxml            |  2 +-
> >  .../itemRenderers/SimpleIconListItemRenderer.mxml  |  2 +-
> >  .../TabBarHorizontalIconItemRenderer.mxml          |  2 +-
> >  .../TabBarVerticalIconItemRenderer.mxml            |  2 +-
> >  .../TableCellCloseIconItemRenderer.mxml            |  2 +-
> >  .../itemRenderers/TableStyleListItemRenderer.mxml  |  2 +-
> >  22 files changed, 82 insertions(+), 82 deletions(-)
> >
> > diff --git
> > a/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
> > b/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
> > index 11e74af..038412c 100644
> > ---
> > a/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
> > +++
> > b/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
> > @@ -24,7 +24,7 @@
> >
> >  j|IconButtonBar
> >  {
> > -    iconClass: ClassReference("org.apache.royale.icons.FontIcon")
> > +    iconClass: ClassReference("org.apache.royale.icons.MaterialIcon")
> >  }
> >
> >  .tableStyle
> > diff --git
> > a/examples/jewel/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
> > b/examples/jewel/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
> > index 4b5f129..df0aeb2 100644
> > --- a/examples/jewel/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
> > +++ b/examples/jewel/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
> > @@ -122,19 +122,19 @@ limitations under the License.
> >                         <j:Card>
> >                                 <html:H3 text="Jewel IconButtonBar"/>
> >
> > -                               <j:Label html="Is a ButtonBar with
> > IconButtons as item renderers. At Application level CSS you need to
> specify
> > the icon class with a declaration for
> > &lt;strong>j|IconButtonBar&lt;/strong> like this: &lt;strong>iconClass:
> > ClassReference('org.apache.royale.icons.FontIcon')&lt;/strong>"
> > +                               <j:Label html="Is a ButtonBar with
> > IconButtons as item renderers. At Application level CSS you need to
> specify
> > the icon class with a declaration for
> > &lt;strong>j|IconButtonBar&lt;/strong> like this: &lt;strong>iconClass:
> > ClassReference('org.apache.royale.icons.MaterialIcon')&lt;/strong>"
> >                                                 multiline="true"/>
> >
> >                                 <html:H4 text="Width 100% and emphasized
> > color"/>
> >
> >                                 <j:IconButtonBar localId="ibb"
> > change="ibb_label.text = ibb.selectedItem.label + ' (icon: ' +
> > ibb.selectedItem.icon + ')'"
> > -                                       emphasis="primary" width="100%"
> > material="true"
> > +                                       emphasis="primary" width="100%"
> >
> > dataProvider="{listModel.iconButtonData}"/>
> >
> >                                 <html:H4 text="No Width and icons to the
> > right"/>
> >
> >                                 <j:IconButtonBar localId="ibb2"
> > change="ibb_label.text = ibb2.selectedItem.label + ' (icon: ' +
> > ibb2.selectedItem.icon + ')'"
> > -                                       emphasis="secondary"
> > rightPosition="true" material="true" iconField="icon"
> > +                                       emphasis="secondary"
> > rightPosition="true"  iconField="icon"
> >
> > dataProvider="{listModel.iconButtonData}"/>
> >
> >                                 <j:Label localId="ibb_label"/>
> > @@ -152,7 +152,7 @@ limitations under the License.
> >                                 <j:ToggleButtonBar localId="tbb"
> >                                         change="tbbChangeHandler(event)"
> >                                         selectedIndex="2"
> > -                                       emphasis="primary" width="100%"
> > material="true"
> > +                                       emphasis="primary" width="100%"
> >
> > dataProvider="{listModel.iconButtonData}"/>
> >
> >                                 <html:H4 text="No Width and icons to the
> > right, selectedIndex is 0"/>
> > @@ -160,7 +160,7 @@ limitations under the License.
> >                                 <j:ToggleButtonBar localId="tbb2"
> >                                         change="tbbChangeHandler(event)"
> >                                         selectedIndex="0"
> > -                                       emphasis="emphasized"
> > rightPosition="true" material="true" iconField="icon"
> > +                                       emphasis="emphasized"
> > rightPosition="true"  iconField="icon"
> >
> > dataProvider="{listModel.iconButtonData}"/>
> >
> >                                 <j:Label localId="tbb_label"/>
> > diff --git
> > a/examples/jewel/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
> > b/examples/jewel/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
> > index 31669af..501c048 100644
> > --- a/examples/jewel/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
> > +++ b/examples/jewel/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
> > @@ -208,24 +208,24 @@ limitations under the License.
> >                                 <j:CardPrimaryContent>
> >                                         <j:IconButton text="print"
> > emphasis="primary">
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.PRINT}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.PRINT}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                         <j:IconButton
> emphasis="secondary">
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.FACE}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.FACE}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                         <j:IconButton text="wifi"
> > emphasis="emphasized">
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.WIFI}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.WIFI}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >
> >                                         <j:HGroup gap="3"
> > itemsVerticalAlign="itemsCenter">
> >                                                 <j:IconButton
> > localId="ib_lor" text="Do not disturb">
> >                                                         <j:icon>
> > -
> >  <js:FontIcon text="{MaterialIconType.DO_NOT_DISTURB}" material="true"/>
> > +
> >  <js:MaterialIcon text="{MaterialIconType.DO_NOT_DISTURB}" />
> >                                                         </j:icon>
> >                                                 </j:IconButton>
> >                                                 <j:CheckBox
> > text="rightPosition" change="ib_lor.rightPosition =
> !ib_lor.rightPosition"/>
> > @@ -242,24 +242,24 @@ limitations under the License.
> >                                 <j:CardPrimaryContent>
> >                                         <j:IconButton text="print"
> > emphasis="primary" outlined="true">
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.PRINT}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.PRINT}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                         <j:IconButton
> emphasis="secondary"
> > outlined="true">
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.FACE}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.FACE}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                         <j:IconButton text="wifi"
> > emphasis="emphasized" outlined="true">
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.WIFI}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.WIFI}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >
> >                                         <j:HGroup gap="3"
> > itemsVerticalAlign="itemsCenter">
> >                                                 <j:IconButton
> > localId="ib_lor2" text="Do not disturb" outlined="true">
> >                                                         <j:icon>
> > -
> >  <js:FontIcon text="{MaterialIconType.DO_NOT_DISTURB}" material="true"/>
> > +
> >  <js:MaterialIcon text="{MaterialIconType.DO_NOT_DISTURB}" />
> >                                                         </j:icon>
> >                                                 </j:IconButton>
> >                                                 <j:CheckBox
> > text="rightPosition" change="ib_lor2.rightPosition =
> > !ib_lor2.rightPosition"/>
> > @@ -276,24 +276,24 @@ limitations under the License.
> >                                 <j:CardPrimaryContent>
> >                                         <j:IconButton text="print"
> > emphasis="primary" unboxed="true">
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.PRINT}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.PRINT}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                         <j:IconButton
> emphasis="secondary"
> > unboxed="true">
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.FACE}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.FACE}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                         <j:IconButton text="wifi"
> > emphasis="emphasized" unboxed="true">
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.WIFI}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.WIFI}"/>
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >
> >                                         <j:HGroup gap="3"
> > itemsVerticalAlign="itemsCenter">
> >                                                 <j:IconButton
> > localId="ib_lor3" text="Do not disturb" unboxed="true">
> >                                                         <j:icon>
> > -
> >  <js:FontIcon text="{MaterialIconType.DO_NOT_DISTURB}" material="true"/>
> > +
> >  <js:MaterialIcon text="{MaterialIconType.DO_NOT_DISTURB}" />
> >                                                         </j:icon>
> >                                                 </j:IconButton>
> >                                                 <j:CheckBox
> > text="rightPosition" change="ib_lor3.rightPosition =
> > !ib_lor3.rightPosition"/>
> > @@ -357,7 +357,7 @@ limitations under the License.
> >                                         </j:ToggleButton>
> >                                         <j:ToggleButton>
> >                                                 <j:icon>
> > -
>  <js:ToggleFontIcon
> > text="{MaterialIconType.VISIBILITY}"
> > selectedText="{MaterialIconType.VISIBILITY_OFF}" material="true"/>
> > +
> >  <js:MaterialToggleIcon text="{MaterialIconType.VISIBILITY}"
> > selectedText="{MaterialIconType.VISIBILITY_OFF}" />
> >                                                 </j:icon>
> >                                                 <j:beads>
> >                                                         <j:ToolTip
> > toolTip="show/hide FooterBar"/>
> > @@ -365,7 +365,7 @@ limitations under the License.
> >                                         </j:ToggleButton>
> >                                         <j:ToggleButton text="Icon and
> > Text" selectedText="Icon and Text" emphasis="{StyledUIBase.SECONDARY}">
> >                                                 <j:icon>
> > -
>  <js:ToggleFontIcon
> > text="{MaterialIconType.VISIBILITY}"
> > selectedText="{MaterialIconType.VISIBILITY_OFF}" material="true"/>
> > +
> >  <js:MaterialToggleIcon text="{MaterialIconType.VISIBILITY}"
> > selectedText="{MaterialIconType.VISIBILITY_OFF}"/>
> >                                                 </j:icon>
> >                                                 <j:beads>
> >                                                         <j:ToolTip
> > toolTip="show/hide FooterBar"/>
> > @@ -374,19 +374,19 @@ limitations under the License.
> >                                         <j:ToggleButton outlined="true"
> > emphasis="secondary"
> >                              text="Show it" selected="true">
> >                              <j:icon>
> > -                                <js:ToggleFontIcon
> > text="{MaterialIconType.VISIBILITY_OFF}"
> > selectedText="{MaterialIconType.VISIBILITY}" material="true"/>
> > +                                <js:MaterialToggleIcon
> > text="{MaterialIconType.VISIBILITY_OFF}"
> > selectedText="{MaterialIconType.VISIBILITY}" />
> >                              </j:icon>
> >                          </j:ToggleButton>
> >                                         <j:ToggleButton unboxed="true"
> > emphasis="primary"
> >                              text="Show it" selected="true">
> >                              <j:icon>
> > -                                <js:ToggleFontIcon
> > text="{MaterialIconType.VISIBILITY_OFF}"
> > selectedText="{MaterialIconType.VISIBILITY}" material="true"/>
> > +                                <js:MaterialToggleIcon
> > text="{MaterialIconType.VISIBILITY_OFF}"
> > selectedText="{MaterialIconType.VISIBILITY}" />
> >                              </j:icon>
> >                          </j:ToggleButton>
> >                                         <j:HGroup gap="3"
> > itemsVerticalAlign="itemsCenter">
> >                                                 <j:ToggleButton
> > localId="tb_lor" text="No Print" selectedText="Print">
> >                                                         <j:icon>
> > -
> >  <js:ToggleFontIcon text="{MaterialIconType.PRINT_DISABLED}"
> > selectedText="{MaterialIconType.PRINT}" material="true"/>
> > +
> >  <js:MaterialToggleIcon text="{MaterialIconType.PRINT_DISABLED}"
> > selectedText="{MaterialIconType.PRINT}" />
> >                                                         </j:icon>
> >                                                 </j:ToggleButton>
> >                                                 <j:CheckBox
> > selected="true" text="rightPosition" change="tb_lor.rightPosition =
> > !tb_lor.rightPosition"/>
> > diff --git
> > a/examples/jewel/TourDeJewel/src/main/royale/CardPlayGround.mxml
> > b/examples/jewel/TourDeJewel/src/main/royale/CardPlayGround.mxml
> > index 9220dee..7fc55d7 100644
> > --- a/examples/jewel/TourDeJewel/src/main/royale/CardPlayGround.mxml
> > +++ b/examples/jewel/TourDeJewel/src/main/royale/CardPlayGround.mxml
> > @@ -111,12 +111,12 @@ limitations under the License.
> >                                 <j:CardActions
> > itemsHorizontalAlign="itemsRight">
> >                                         <j:IconButton text="Reply"
> > emphasis="primary" outlined="true">
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.REPLY}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.REPLY}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                         <j:IconButton text="Cancel"
> > outlined="true">
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.CANCEL}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.CANCEL}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                 </j:CardActions>
> > @@ -132,12 +132,12 @@ limitations under the License.
> >                                         <j:BarSection
> > itemsHorizontalAlign="itemsRight">
> >                                                 <j:IconButton
> > emphasis="primary" unboxed="true">
> >                                                         <j:icon>
> > -
> >  <js:FontIcon text="{MaterialIconType.SHARE}" material="true"/>
> > +
> >  <js:MaterialIcon text="{MaterialIconType.SHARE}" />
> >                                                         </j:icon>
> >                                                 </j:IconButton>
> >                                                 <j:IconButton
> > unboxed="true">
> >                                                         <j:icon>
> > -
> >  <js:FontIcon text="{MaterialIconType.MORE_VERT}" material="true"/>
> > +
> >  <js:MaterialIcon text="{MaterialIconType.MORE_VERT}" />
> >                                                         </j:icon>
> >                                                 </j:IconButton>
> >                                         </j:BarSection>
> > diff --git
> > a/examples/jewel/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml
> > b/examples/jewel/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml
> > index 1667c51..4bd22d9 100644
> > --- a/examples/jewel/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml
> > +++ b/examples/jewel/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml
> > @@ -90,7 +90,7 @@ limitations under the License.
> >                                         <j:BarSection
> > itemsHorizontalAlign="itemsRight">
> >                                                 <j:IconButton
> > unboxed="true" click="assignNewData(watchmenComboBox)">
> >                                                         <j:icon>
> > -
> >  <js:FontIcon text="{MaterialIconType.SETTINGS_BACKUP_RESTORE}"
> > material="true"/>
> > +
> >  <js:MaterialIcon text="{MaterialIconType.SETTINGS_BACKUP_RESTORE}" />
> >                                                         </j:icon>
> >                                                         <j:beads>
> >
>  <j:ToolTip
> > toolTip="Assign new data"/>
> > @@ -131,7 +131,7 @@ limitations under the License.
> >                                         <j:BarSection
> > itemsHorizontalAlign="itemsRight">
> >                                                 <j:IconButton
> > unboxed="true" click="assignNewData(avengersComboBox)">
> >                                                         <j:icon>
> > -
> >  <js:FontIcon text="{MaterialIconType.SETTINGS_BACKUP_RESTORE}"
> > material="true"/>
> > +
> >  <js:MaterialIcon text="{MaterialIconType.SETTINGS_BACKUP_RESTORE}" />
> >                                                         </j:icon>
> >                                                         <j:beads>
> >
>  <j:ToolTip
> > toolTip="Assign new data"/>
> > diff --git
> > a/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
> > b/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
> > index 4c8b917..9d0d460 100644
> > --- a/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
> > +++ b/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
> > @@ -197,7 +197,7 @@ limitations under the License.
> >                                                         <j:ToolTip
> > toolTip="Clear Data"/>
> >                                                 </j:beads>
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.CLEAR}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.CLEAR}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                         <j:IconButton
> > click="loadDataProvider(dg1)" emphasis="primary" outlined="true">
> > @@ -205,7 +205,7 @@ limitations under the License.
> >                                                         <j:ToolTip
> > toolTip="Load Data"/>
> >                                                 </j:beads>
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.VIEW_HEADLINE}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.VIEW_HEADLINE}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                 </j:CardActions>
> > @@ -247,7 +247,7 @@ limitations under the License.
> >                                                         <j:ToolTip
> > toolTip="Clear Data"/>
> >                                                 </j:beads>
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.CLEAR}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.CLEAR}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                         <j:IconButton
> > click="loadDataProvider(dg2)" emphasis="primary" outlined="true">
> > @@ -255,7 +255,7 @@ limitations under the License.
> >                                                         <j:ToolTip
> > toolTip="Load Data"/>
> >                                                 </j:beads>
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.VIEW_HEADLINE}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.VIEW_HEADLINE}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                 </j:CardActions>
> > @@ -295,7 +295,7 @@ limitations under the License.
> >                                                         <j:ToolTip
> > toolTip="Change Column Labels"/>
> >                                                 </j:beads>
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.RESTORE_PAGE}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.RESTORE_PAGE}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                         <j:IconButton
> > click="clearBindedDataProvider(dg3)" outlined="true">
> > @@ -303,7 +303,7 @@ limitations under the License.
> >                                                         <j:ToolTip
> > toolTip="Clear Data"/>
> >                                                 </j:beads>
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.CLEAR_ALL}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.CLEAR_ALL}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                         <j:IconButton
> > click="loadBindedDataProvider(dg3)" emphasis="primary" outlined="true">
> > @@ -311,7 +311,7 @@ limitations under the License.
> >                                                         <j:ToolTip
> > toolTip="Load Data"/>
> >                                                 </j:beads>
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.AUTORENEW}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.AUTORENEW}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                 </j:CardActions>
> > @@ -351,7 +351,7 @@ limitations under the License.
> >                                                         <j:ToolTip
> > toolTip="Add Row"/>
> >                                                 </j:beads>
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.ADD}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.ADD}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                         <j:IconButton
> > click="removeFirstRow(dg4)" outlined="true">
> > @@ -359,7 +359,7 @@ limitations under the License.
> >                                                         <j:ToolTip
> > toolTip="Remove First Row"/>
> >                                                 </j:beads>
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.REMOVE}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.REMOVE}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                         <j:IconButton
> > click="updateFirstRow(dg4)" emphasis="primary" outlined="true">
> > @@ -367,7 +367,7 @@ limitations under the License.
> >                                                         <j:ToolTip
> > toolTip="Update First Row"/>
> >                                                 </j:beads>
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.UPDATE}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.UPDATE}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                         <j:IconButton
> > click="removeAllRows(dg4)" emphasis="primary" outlined="true">
> > @@ -375,7 +375,7 @@ limitations under the License.
> >                                                         <j:ToolTip
> > toolTip="Remove all rows"/>
> >                                                 </j:beads>
> >                                                 <j:icon>
> > -                                                       <js:FontIcon
> > text="{MaterialIconType.DELETE_FOREVER}" material="true"/>
> > +                                                       <js:MaterialIcon
> > text="{MaterialIconType.DELETE_FOREVER}" />
> >                                                 </j:icon>
> >                                         </j:IconButton>
> >                                 </j:CardActions>
> > diff --git a/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
> > b/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
> > index 9ced58e..655b0bc 100644
> > --- a/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
> > +++ b/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
> > @@ -214,7 +214,7 @@ limitations under the License.
> >                  <j:BarSection>
> >                      <j:IconButton>
> >                          <j:icon>
> > -                            <js:FontIcon
> > text="{MaterialIconType.FEEDBACK}" material="true"/>
> > +                            <js:MaterialIcon
> > text="{MaterialIconType.FEEDBACK}" />
> >                          </j:icon>
> >                      </j:IconButton>
> >                  </j:BarSection>
> > @@ -231,7 +231,7 @@ limitations under the License.
> >                          <j:Badge localId="badge" overlap="true"/>
> >                      </j:beads>
> >                      <j:icon>
> > -                        <js:FontIcon
> > text="{MaterialIconType.ACCOUNT_BALANCE}" material="true"/>
> > +                        <js:MaterialIcon
> > text="{MaterialIconType.ACCOUNT_BALANCE}" />
> >                      </j:icon>
> >                  </j:IconButton>
> >                  <j:IconButton click="popup.open = !popup.open">
> > @@ -239,7 +239,7 @@ limitations under the License.
> >                          <j:Badge text="5" emphasis="secondary"
> > subindex="true" overlap="true"/>
> >                      </j:beads>
> >                      <j:icon>
> > -                        <js:FontIcon
> text="{MaterialIconType.DATA_USAGE}"
> > material="true"/>
> > +                        <js:MaterialIcon
> > text="{MaterialIconType.DATA_USAGE}" />
> >                      </j:icon>
> >                  </j:IconButton>
> >                  <j:PopUp localId="popup"
> > closePopUp="popupFormContent.formValidator.removeAllErrorTips()">
> > @@ -255,7 +255,7 @@ limitations under the License.
> >                          <j:Badge text="27" emphasis="primary"
> > preindex="true" overlap="true"/>
> >                      </j:beads>
> >                      <j:icon>
> > -                        <js:FontIcon text="{MaterialIconType.ADD_ALARM}"
> > material="true"/>
> > +                        <js:MaterialIcon
> > text="{MaterialIconType.ADD_ALARM}" />
> >                      </j:icon>
> >                  </j:IconButton>
> >                  <j:IconButton>
> > @@ -263,7 +263,7 @@ limitations under the License.
> >                          <j:Badge text="209" emphasis="emphasized"
> > subindex="true" preindex="true" overlap="true"/>
> >                      </j:beads>
> >                      <j:icon>
> > -                        <js:FontIcon
> > text="{MaterialIconType.ANNOUNCEMENT}" material="true"/>
> > +                        <js:MaterialIcon
> > text="{MaterialIconType.ANNOUNCEMENT}" />
> >                      </j:icon>
> >                  </j:IconButton>
> >              </j:BarSection>
> > @@ -278,7 +278,7 @@ limitations under the License.
> >                          <j:ResponsiveVisibility desktopVisible="false"
> > wideScreenVisible="false" />
> >                      </j:beads>
> >                      <j:icon>
> > -                        <js:FontIcon text="{MaterialIconType.MENU}"
> > material="true"/>
> > +                        <js:MaterialIcon text="{MaterialIconType.MENU}"
> />
> >                      </j:icon>
> >                  </j:IconButton>
> >                  <j:BarTitle text="Apache Royale Tour de Jewel"/>
> > @@ -289,7 +289,7 @@ limitations under the License.
> >                          <j:ToolTip toolTip="Detect Orientation"/>
> >                      </j:beads>
> >                      <j:icon>
> > -                        <js:ToggleFontIcon
> > text="{MaterialIconType.SCREEN_LOCK_ROTATION}"
> > selectedText="{MaterialIconType.SCREEN_ROTATION}" material="true"/>
> > +                        <js:MaterialToggleIcon
> > text="{MaterialIconType.SCREEN_LOCK_ROTATION}"
> > selectedText="{MaterialIconType.SCREEN_ROTATION}" />
> >                      </j:icon>
> >                  </j:ToggleButton>
> >                  <j:ToggleButton click="footerbar.visible =
> > !footerbar.visible">
> > @@ -297,7 +297,7 @@ limitations under the License.
> >                          <j:ToolTip toolTip="show/hide FooterBar"/>
> >                      </j:beads>
> >                      <j:icon>
> > -                        <js:ToggleFontIcon
> > text="{MaterialIconType.VISIBILITY}"
> > selectedText="{MaterialIconType.VISIBILITY_OFF}" material="true"/>
> > +                        <js:MaterialToggleIcon
> > text="{MaterialIconType.VISIBILITY}"
> > selectedText="{MaterialIconType.VISIBILITY_OFF}" />
> >                      </j:icon>
> >                  </j:ToggleButton>
> >                  <j:ToggleButton click="toggleTopAppBarFixed()">
> > @@ -305,7 +305,7 @@ limitations under the License.
> >                          <j:ToolTip toolTip="Lock(fix) or Unlock the
> > TopBar"/>
> >                      </j:beads>
> >                      <j:icon>
> > -                        <js:ToggleFontIcon
> text="{MaterialIconType.LOCK}"
> > selectedText="{MaterialIconType.LOCK_OPEN}" material="true"/>
> > +                        <js:MaterialToggleIcon
> > text="{MaterialIconType.LOCK}"
> selectedText="{MaterialIconType.LOCK_OPEN}"
> > />
> >                      </j:icon>
> >                  </j:ToggleButton>
> >              </j:BarSection>
> > diff --git
> > a/examples/jewel/TourDeJewel/src/main/royale/MiscelaneaPlayGound.mxml
> > b/examples/jewel/TourDeJewel/src/main/royale/MiscelaneaPlayGound.mxml
> > index 1d27af2..c9fc92e 100644
> > --- a/examples/jewel/TourDeJewel/src/main/royale/MiscelaneaPlayGound.mxml
> > +++ b/examples/jewel/TourDeJewel/src/main/royale/MiscelaneaPlayGound.mxml
> > @@ -42,13 +42,13 @@ limitations under the License.
> >              <j:Card>
> >                  <html:H3 text="Jewel Icons Sizes"/>
> >
> > -                <js:FontIcon text="{MaterialIconType.FACE}"
> > material="true" size="18"/>
> > +                <js:MaterialIcon text="{MaterialIconType.FACE}"
> > size="18"/>
> >                  <j:Label text="18px"/>
> > -                <js:FontIcon text="{MaterialIconType.FACE}"
> > material="true" size="24"/>
> > +                <js:MaterialIcon text="{MaterialIconType.FACE}"
> > size="24"/>
> >                  <j:Label text="24px (default)"/>
> > -                <js:FontIcon text="{MaterialIconType.FACE}"
> > material="true" size="36"/>
> > +                <js:MaterialIcon text="{MaterialIconType.FACE}"
> > size="36"/>
> >                  <j:Label text="36px"/>
> > -                <js:FontIcon text="{MaterialIconType.FACE}"
> > material="true" size="48"/>
> > +                <js:MaterialIcon text="{MaterialIconType.FACE}"
> > size="48"/>
> >                  <j:Label text="48px"/>
> >              </j:Card>
> >          </j:GridCell>
> > @@ -57,13 +57,13 @@ limitations under the License.
> >              <j:Card>
> >                  <html:H3 text="Jewel Icons Dark / Light"/>
> >
> > -                <js:FontIcon text="{MaterialIconType.FACE}"
> > material="true" dark="true"/>
> > +                <js:MaterialIcon text="{MaterialIconType.FACE}"
> > dark="true"/>
> >                  <j:Label text="dark"/>
> > -                <js:FontIcon text="{MaterialIconType.FACE}"
> > material="true" dark="true" inactive="true"/>
> > +                <js:MaterialIcon text="{MaterialIconType.FACE}"
> > dark="true" inactive="true"/>
> >                  <j:Label text="dark - inactive"/>
> > -                <js:FontIcon text="{MaterialIconType.FACE}"
> > material="true" light="true"/>
> > +                <js:MaterialIcon text="{MaterialIconType.FACE}"
> > light="true"/>
> >                  <j:Label text="light"/>
> > -                <js:FontIcon text="{MaterialIconType.FACE}"
> > material="true" light="true" inactive="true"/>
> > +                <js:MaterialIcon text="{MaterialIconType.FACE}"
> > light="true" inactive="true"/>
> >                  <j:Label text="light - inactive"/>
> >              </j:Card>
> >          </j:GridCell>
> > diff --git
> > a/examples/jewel/TourDeJewel/src/main/royale/TablePlayGround.mxml
> > b/examples/jewel/TourDeJewel/src/main/royale/TablePlayGround.mxml
> > index a3c85a7..fcc1a89 100644
> > --- a/examples/jewel/TourDeJewel/src/main/royale/TablePlayGround.mxml
> > +++ b/examples/jewel/TourDeJewel/src/main/royale/TablePlayGround.mxml
> > @@ -71,7 +71,7 @@ limitations under the License.
> >                                         <j:TBody>
> >                                                 <j:TableRow>
> >                                                         <j:TableCell>
> > -
> >  <js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}"
> material="true"/>
> > +
> >  <js:MaterialIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" />
> >                                                         </j:TableCell>
> >                                                         <j:TableCell
> > expandRows="2">
> >                                                                 <j:Label
> > text="Some text in two rows" multiline="true"/>
> > @@ -93,7 +93,7 @@ limitations under the License.
> >                                                 </j:TableRow>
> >                                                 <j:TableRow>
> >                                                         <j:TableCell>
> > -
> >  <js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}"
> material="true"/>
> > +
> >  <js:MaterialIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" />
> >                                                         </j:TableCell>
> >
> >                                                         <j:TableCell>
> > @@ -113,7 +113,7 @@ limitations under the License.
> >                                                 </j:TableRow>
> >                                                 <j:TableRow>
> >                                                         <j:TableCell>
> > -
> >  <js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}"
> material="true"/>
> > +
> >  <js:MaterialIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" />
> >                                                         </j:TableCell>
> >                                                         <j:TableCell>
> >                                                                 <j:Label
> > text="More text 2" />
> > @@ -135,7 +135,7 @@ limitations under the License.
> >                                                 </j:TableRow>
> >                                                 <j:TableRow>
> >                                                         <j:TableCell>
> > -
> >  <js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}"
> material="true"/>
> > +
> >  <js:MaterialIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" />
> >                                                         </j:TableCell>
> >                                                         <j:TableCell>
> >                                                                 <!-- By
> > using a Group within a cell you have better control of the
> > @@ -173,7 +173,7 @@ limitations under the License.
> >
> >               <j:TextPrompt prompt="Search..."/>
> >
> >       </j:beads>
> >
> >       <j:icon>
> > -
> >              <js:FontIcon text="{MaterialIconType.SEARCH}"
> material="true"/>
> > +
> >              <js:MaterialIcon text="{MaterialIconType.SEARCH}" />
> >
> >       </j:icon>
> >
> > </j:IconTextInput>
> >
> > <j:Button text="SEARCH" emphasis="{StyledUIBase.PRIMARY}"/>
> > diff --git
> > a/examples/jewel/TourDeJewel/src/main/royale/TextInputPlayGround.mxml
> > b/examples/jewel/TourDeJewel/src/main/royale/TextInputPlayGround.mxml
> > index f266f6c..69fe4ed 100644
> > --- a/examples/jewel/TourDeJewel/src/main/royale/TextInputPlayGround.mxml
> > +++ b/examples/jewel/TourDeJewel/src/main/royale/TextInputPlayGround.mxml
> > @@ -211,7 +211,7 @@ limitations under the License.
> >
> >                                 <j:IconTextInput text="Searching
> > something">
> >                                         <j:icon>
> > -                                               <js:FontIcon
> > text="{MaterialIconType.SEARCH}" material="true"/>
> > +                                               <js:MaterialIcon
> > text="{MaterialIconType.SEARCH}" />
> >                                         </j:icon>
> >                                 </j:IconTextInput>
> >
> > @@ -220,7 +220,7 @@ limitations under the License.
> >                                                 <j:TextPrompt
> > prompt="Search..."/>
> >                                         </j:beads>
> >                                         <j:icon>
> > -                                               <js:FontIcon
> > text="{MaterialIconType.SEARCH}" material="true"/>
> > +                                               <js:MaterialIcon
> > text="{MaterialIconType.SEARCH}" />
> >                                         </j:icon>
> >                                 </j:IconTextInput>
> >
> > @@ -230,7 +230,7 @@ limitations under the License.
> >                                                 <j:Disabled/>
> >                                         </j:beads>
> >                                         <j:icon>
> > -                                               <js:FontIcon
> > text="{MaterialIconType.SEARCH}" material="true"/>
> > +                                               <js:MaterialIcon
> > text="{MaterialIconType.SEARCH}" />
> >                                         </j:icon>
> >                                 </j:IconTextInput>
> >
> > @@ -240,7 +240,7 @@ limitations under the License.
> >                                                 <j:Disabled/>
> >                                         </j:beads>
> >                                         <j:icon>
> > -                                               <js:FontIcon
> > text="{MaterialIconType.SEARCH}" material="true"/>
> > +                                               <js:MaterialIcon
> > text="{MaterialIconType.SEARCH}" />
> >                                         </j:icon>
> >                                 </j:IconTextInput>
> >
> > @@ -249,7 +249,7 @@ limitations under the License.
> >                                                 <j:SizeControl
> > size="xlarge"/>
> >                                         </j:beads>
> >                                         <j:icon>
> > -                                               <js:FontIcon
> > text="{MaterialIconType.SEARCH}" material="true"/>
> > +                                               <js:MaterialIcon
> > text="{MaterialIconType.SEARCH}" />
> >                                         </j:icon>
> >                                 </j:IconTextInput>
> >                         </j:Card>
> > diff --git
> > a/examples/jewel/TourDeJewel/src/main/royale/WelcomeSection.mxml
> > b/examples/jewel/TourDeJewel/src/main/royale/WelcomeSection.mxml
> > index 384171a..4303427 100644
> > --- a/examples/jewel/TourDeJewel/src/main/royale/WelcomeSection.mxml
> > +++ b/examples/jewel/TourDeJewel/src/main/royale/WelcomeSection.mxml
> > @@ -136,7 +136,7 @@ limitations under the License.
> >                      <j:SizeControl size="xlarge"/>
> >                  </j:beads>
> >                  <j:icon>
> > -                    <js:FontIcon text="{MaterialIconType.SEARCH}"
> > material="true"/>
> > +                    <js:MaterialIcon text="{MaterialIconType.SEARCH}" />
> >                  </j:icon>
> >              </j:IconTextInput>
> >              <j:Button text="Search" emphasis="secondary">
> > diff --git
> > a/examples/jewel/TourDeJewel/src/main/royale/WizardPlayGround.mxml
> > b/examples/jewel/TourDeJewel/src/main/royale/WizardPlayGround.mxml
> > index 79e2222..7e56642 100644
> > --- a/examples/jewel/TourDeJewel/src/main/royale/WizardPlayGround.mxml
> > +++ b/examples/jewel/TourDeJewel/src/main/royale/WizardPlayGround.mxml
> > @@ -72,7 +72,7 @@ limitations under the License.
> >                                                 <j:Group>
> >                                                         <j:IconButton
> > emphasis="{StyledUIBase.SECONDARY}">
> >                                                                 <j:icon>
> > -
> >  <js:FontIcon text="{MaterialIconType.KEYBOARD_ARROW_LEFT}"
> material="true"
> > size="48"/>
> > +
> >  <js:MaterialIcon text="{MaterialIconType.KEYBOARD_ARROW_LEFT}"
> size="48"/>
> >                                                                 </j:icon>
> >                                                         </j:IconButton>
> >                                                 </j:Group>
> > @@ -82,7 +82,7 @@ limitations under the License.
> >                                                 <j:Group>
> >                                                         <j:IconButton
> > emphasis="{StyledUIBase.SECONDARY}">
> >                                                                 <j:icon>
> > -
> >  <js:FontIcon text="{MaterialIconType.KEYBOARD_ARROW_RIGHT}"
> > material="true" size="48"/>
> > +
> >  <js:MaterialIcon text="{MaterialIconType.KEYBOARD_ARROW_RIGHT}"
> > size="48"/>
> >                                                                 </j:icon>
> >                                                         </j:IconButton>
> >                                                 </j:Group>
> > diff --git
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/AdvancedIconListItemRenderer.mxml
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/AdvancedIconListItemRenderer.mxml
> > index 47185f4..5ce2503 100644
> > ---
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/AdvancedIconListItemRenderer.mxml
> > +++
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/AdvancedIconListItemRenderer.mxml
> > @@ -85,8 +85,8 @@ limitations under the License.
> >          <js:ItemRendererDataBinding/>
> >      </j:beads>
> >
> > -    <js:FontIcon text="{iconListItem ? iconListItem.icon : ''}"
> > -                material="true"
> > +    <js:MaterialIcon text="{iconListItem ? iconListItem.icon : ''}"
> > +
> >                  visible="{iconListItem ? iconListItem.icon != null :
> > false}"
> >                  className="{colorClass}"
> >                  click="clickCloseButton()"/>
> > diff --git
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconDataGridItemRenderer.mxml
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconDataGridItemRenderer.mxml
> > index 18eb319..299fe3f 100644
> > ---
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconDataGridItemRenderer.mxml
> > +++
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconDataGridItemRenderer.mxml
> > @@ -50,7 +50,7 @@ limitations under the License.
> >          <j:HorizontalCenteredLayout/>
> >      </j:beads>
> >
> > -    <js:FontIcon text="{iconList ? iconList.icon : ''}" material="true"
> > +    <js:MaterialIcon text="{iconList ? iconList.icon : ''}"
> >          visible="{iconList ? iconList.icon != null : false}"
> >          click="clickCloseButton(event)"/>
> >
> > diff --git
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconListItemRenderer.mxml
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconListItemRenderer.mxml
> > index d9c7b69..d22dfc0 100644
> > ---
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconListItemRenderer.mxml
> > +++
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconListItemRenderer.mxml
> > @@ -60,7 +60,7 @@ limitations under the License.
> >          <js:ToolTipRemovalWhenItemRemoved tooltip="{tt}"/>
> >      </j:beads>
> >
> > -    <js:FontIcon text="{iconList ? iconList.icon : ''}" material="true"
> > visible="{iconList ? iconList.icon != null : false}"
> > click="clickCloseButton()"/>
> > +    <js:MaterialIcon text="{iconList ? iconList.icon : ''}"
> > visible="{iconList ? iconList.icon != null : false}"
> > click="clickCloseButton()"/>
> >
> >      <j:Label html="{text}" multiline="true"/>
> >
> > diff --git
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml
> > index 5f8bec9..182238e 100644
> > ---
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml
> > +++
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml
> > @@ -81,11 +81,11 @@ limitations under the License.
> >          <js:ItemRendererDataBinding />
> >      </j:beads>
> >
> > -    <js:FontIcon text="{navlink ? navlink.icon : ''}" material="true"
> > visible="{navlink ? navlink.icon != null : false}"/>
> > +    <js:MaterialIcon text="{navlink ? navlink.icon : ''}"
> > visible="{navlink ? navlink.icon != null : false}"/>
> >
> >      <html:Span className="navigation-section-title" text="{text}"/>
> >
> > -    <js:FontIcon text="{open? MaterialIconType.EXPAND_LESS:
> > MaterialIconType.EXPAND_MORE}" material="true" className="hint"
> > +    <js:MaterialIcon text="{open? MaterialIconType.EXPAND_LESS:
> > MaterialIconType.EXPAND_MORE}"  className="hint"
> >                  visible="{navlink.subMenu != null}" />
> >
> >  </j:CollapsibleNavigationSectionRenderer>
> > diff --git
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationIconLinkItemRenderer.mxml
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationIconLinkItemRenderer.mxml
> > index d95520e..f9a6644 100644
> > ---
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationIconLinkItemRenderer.mxml
> > +++
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationIconLinkItemRenderer.mxml
> > @@ -39,7 +39,7 @@ limitations under the License.
> >          <js:ItemRendererDataBinding />
> >      </j:beads>
> >
> > -    <js:FontIcon text="{navlink ? navlink.icon : ''}" material="true"
> > visible="{navlink ? navlink.icon != null : false}"/>
> > +    <js:MaterialIcon text="{navlink ? navlink.icon : ''}"
> > visible="{navlink ? navlink.icon != null : false}"/>
> >
> >      <html:Span text="{navlink ? navlink.label : ''}"/>
> >
> > diff --git
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/SimpleIconListItemRenderer.mxml
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/SimpleIconListItemRenderer.mxml
> > index b0613b1..359edaa 100644
> > ---
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/SimpleIconListItemRenderer.mxml
> > +++
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/SimpleIconListItemRenderer.mxml
> > @@ -39,7 +39,7 @@ limitations under the License.
> >      </j:beads>
> >
> >      <j:HGroup gap="6" itemsVerticalAlign="itemsCenter">
> > -        <js:FontIcon text="{iconList.icon}" material="true"
> > visible="{iconList.icon != null}"/>
> > +        <js:MaterialIcon text="{iconList.icon}"  visible="{iconList.icon
> > != null}"/>
> >          <j:Label html="{text}"/>
> >      </j:HGroup>
> >
> > diff --git
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml
> > index a7f92f4..26f8828 100644
> > ---
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml
> > +++
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml
> > @@ -40,7 +40,7 @@ limitations under the License.
> >      </j:beads>
> >
> >      <j:HGroup gap="4" itemsVerticalAlign="itemsCenter">
> > -        <js:FontIcon text="{tabButton ? tabButton.icon : ''}"
> > material="true"
> > +        <js:MaterialIcon text="{tabButton ? tabButton.icon : ''}"
> >                      visible="{tabButton ? tabButton.icon != null :
> > false}"/>
> >          <html:Span text="{tabButton ? tabButton.label : ''}"/>
> >      </j:HGroup>
> > diff --git
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
> > index f31faaf..b323763 100644
> > ---
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
> > +++
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
> > @@ -40,7 +40,7 @@ limitations under the License.
> >      </j:beads>
> >
> >      <j:VGroup itemsHorizontalAlign="itemsCenter">
> > -        <js:FontIcon text="{tabButton ? tabButton.icon : ''}"
> > material="true"
> > +        <js:MaterialIcon text="{tabButton ? tabButton.icon : ''}"
> >                      visible="{tabButton ? tabButton.icon != null :
> > false}"/>
> >          <html:Span text="{tabButton ? tabButton.label : ''}"/>
> >      </j:VGroup>
> > diff --git
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
> > index ddc608a..9bfb4b8 100644
> > ---
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
> > +++
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
> > @@ -44,7 +44,7 @@ limitations under the License.
> >
> >      <j:IconButton emphasis="primary" width="24" height="24"
> > style="padding: 0px; border-radius: 50%" click="clickCloseButton()">
> >          <j:icon>
> > -            <js:FontIcon text="{MaterialIconType.CLOSE}" material="true"
> > size="18"/>
> > +            <js:MaterialIcon text="{MaterialIconType.CLOSE}"
> size="18"/>
> >          </j:icon>
> >      </j:IconButton>
> >
> > diff --git
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableStyleListItemRenderer.mxml
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableStyleListItemRenderer.mxml
> > index 5f0c5e3..b164048 100644
> > ---
> >
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableStyleListItemRenderer.mxml
> > +++
> >
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableStyleListItemRenderer.mxml
> > @@ -27,7 +27,7 @@ limitations under the License.
> >          <j:HorizontalLayout/>
> >      </ir:beads>
> >
> > -    <js:FontIcon text="{iconList ? iconList.icon : ''}" material="true"
> > visible="{iconList ? iconList.icon != null : false}"
> > click="clickCloseButton()" width="100"/>
> > +    <js:MaterialIcon text="{iconList ? iconList.icon : ''}"
> > visible="{iconList ? iconList.icon != null : false}"
> > click="clickCloseButton()" width="100"/>
> >      <j:Label html="{text}" multiline="true" width="300"/>
> >      <j:Label html="Third field" multiline="true" width="100"/>
> >      <j:Label html="Fourth field" multiline="true" width="200"/>
> >
> >
>
> --
>
> Piotr Zarzycki
>
> Patreon: *https://www.patreon.com/piotrzarzycki
> <https://www.patreon.com/piotrzarzycki>*
>


-- 
Carlos Rovira
http://about.me/carlosrovira

Re: [royale-asjs] branch develop updated: tour-de-jewel: Change references of FontIcon to MaterialIcon and remove "material=true". Important: Now FontIcon is deprecated and will be removed soon. As in CSS we change "iconClass" to MaterialIcon for IconButtonBar and subclasses

Posted by Piotr Zarzycki <pi...@gmail.com>.
Hi Carlos,

Please make some post about that on users/dev list. :)

Thanks,
Piotr

wt., 31 mar 2020 o 16:25 <ca...@apache.org> napisał(a):

> This is an automated email from the ASF dual-hosted git repository.
>
> carlosrovira pushed a commit to branch develop
> in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
>
>
> The following commit(s) were added to refs/heads/develop by this push:
>      new a2c8f39  tour-de-jewel: Change references of FontIcon to
> MaterialIcon and remove "material=true". Important: Now FontIcon is
> deprecated and will be removed soon. As in CSS we change "iconClass" to
> MaterialIcon for IconButtonBar and subclasses
> a2c8f39 is described below
>
> commit a2c8f39034ad4f048c6742f30fc530dfca17ec32
> Author: Carlos Rovira <ca...@apache.org>
> AuthorDate: Tue Mar 31 16:25:44 2020 +0200
>
>     tour-de-jewel: Change references of FontIcon to MaterialIcon and
> remove "material=true". Important: Now FontIcon is deprecated and will be
> removed soon. As in CSS we change "iconClass" to MaterialIcon for
> IconButtonBar and subclasses
> ---
>  .../src/main/resources/jewel-example-styles.css    |  2 +-
>  .../src/main/royale/ButtonBarPlayGround.mxml       | 10 +++----
>  .../src/main/royale/ButtonPlayGround.mxml          | 34
> +++++++++++-----------
>  .../src/main/royale/CardPlayGround.mxml            |  8 ++---
>  .../src/main/royale/ComboBoxPlayGround.mxml        |  4 +--
>  .../src/main/royale/DataGridPlayGround.mxml        | 22 +++++++-------
>  .../TourDeJewel/src/main/royale/MainContent.mxml   | 18 ++++++------
>  .../src/main/royale/MiscelaneaPlayGound.mxml       | 16 +++++-----
>  .../src/main/royale/TablePlayGround.mxml           | 10 +++----
>  .../src/main/royale/TextInputPlayGround.mxml       | 10 +++----
>  .../src/main/royale/WelcomeSection.mxml            |  2 +-
>  .../src/main/royale/WizardPlayGround.mxml          |  4 +--
>  .../AdvancedIconListItemRenderer.mxml              |  4 +--
>  .../itemRenderers/IconDataGridItemRenderer.mxml    |  2 +-
>  .../royale/itemRenderers/IconListItemRenderer.mxml |  2 +-
>  .../NavigationGroupExampleItemRenderer.mxml        |  4 +--
>  .../NavigationIconLinkItemRenderer.mxml            |  2 +-
>  .../itemRenderers/SimpleIconListItemRenderer.mxml  |  2 +-
>  .../TabBarHorizontalIconItemRenderer.mxml          |  2 +-
>  .../TabBarVerticalIconItemRenderer.mxml            |  2 +-
>  .../TableCellCloseIconItemRenderer.mxml            |  2 +-
>  .../itemRenderers/TableStyleListItemRenderer.mxml  |  2 +-
>  22 files changed, 82 insertions(+), 82 deletions(-)
>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
> b/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
> index 11e74af..038412c 100644
> ---
> a/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
> +++
> b/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
> @@ -24,7 +24,7 @@
>
>  j|IconButtonBar
>  {
> -    iconClass: ClassReference("org.apache.royale.icons.FontIcon")
> +    iconClass: ClassReference("org.apache.royale.icons.MaterialIcon")
>  }
>
>  .tableStyle
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
> index 4b5f129..df0aeb2 100644
> --- a/examples/jewel/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
> +++ b/examples/jewel/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
> @@ -122,19 +122,19 @@ limitations under the License.
>                         <j:Card>
>                                 <html:H3 text="Jewel IconButtonBar"/>
>
> -                               <j:Label html="Is a ButtonBar with
> IconButtons as item renderers. At Application level CSS you need to specify
> the icon class with a declaration for
> &lt;strong>j|IconButtonBar&lt;/strong> like this: &lt;strong>iconClass:
> ClassReference('org.apache.royale.icons.FontIcon')&lt;/strong>"
> +                               <j:Label html="Is a ButtonBar with
> IconButtons as item renderers. At Application level CSS you need to specify
> the icon class with a declaration for
> &lt;strong>j|IconButtonBar&lt;/strong> like this: &lt;strong>iconClass:
> ClassReference('org.apache.royale.icons.MaterialIcon')&lt;/strong>"
>                                                 multiline="true"/>
>
>                                 <html:H4 text="Width 100% and emphasized
> color"/>
>
>                                 <j:IconButtonBar localId="ibb"
> change="ibb_label.text = ibb.selectedItem.label + ' (icon: ' +
> ibb.selectedItem.icon + ')'"
> -                                       emphasis="primary" width="100%"
> material="true"
> +                                       emphasis="primary" width="100%"
>
> dataProvider="{listModel.iconButtonData}"/>
>
>                                 <html:H4 text="No Width and icons to the
> right"/>
>
>                                 <j:IconButtonBar localId="ibb2"
> change="ibb_label.text = ibb2.selectedItem.label + ' (icon: ' +
> ibb2.selectedItem.icon + ')'"
> -                                       emphasis="secondary"
> rightPosition="true" material="true" iconField="icon"
> +                                       emphasis="secondary"
> rightPosition="true"  iconField="icon"
>
> dataProvider="{listModel.iconButtonData}"/>
>
>                                 <j:Label localId="ibb_label"/>
> @@ -152,7 +152,7 @@ limitations under the License.
>                                 <j:ToggleButtonBar localId="tbb"
>                                         change="tbbChangeHandler(event)"
>                                         selectedIndex="2"
> -                                       emphasis="primary" width="100%"
> material="true"
> +                                       emphasis="primary" width="100%"
>
> dataProvider="{listModel.iconButtonData}"/>
>
>                                 <html:H4 text="No Width and icons to the
> right, selectedIndex is 0"/>
> @@ -160,7 +160,7 @@ limitations under the License.
>                                 <j:ToggleButtonBar localId="tbb2"
>                                         change="tbbChangeHandler(event)"
>                                         selectedIndex="0"
> -                                       emphasis="emphasized"
> rightPosition="true" material="true" iconField="icon"
> +                                       emphasis="emphasized"
> rightPosition="true"  iconField="icon"
>
> dataProvider="{listModel.iconButtonData}"/>
>
>                                 <j:Label localId="tbb_label"/>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
> index 31669af..501c048 100644
> --- a/examples/jewel/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
> +++ b/examples/jewel/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
> @@ -208,24 +208,24 @@ limitations under the License.
>                                 <j:CardPrimaryContent>
>                                         <j:IconButton text="print"
> emphasis="primary">
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.PRINT}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.PRINT}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                         <j:IconButton emphasis="secondary">
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.FACE}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.FACE}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                         <j:IconButton text="wifi"
> emphasis="emphasized">
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.WIFI}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.WIFI}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>
>                                         <j:HGroup gap="3"
> itemsVerticalAlign="itemsCenter">
>                                                 <j:IconButton
> localId="ib_lor" text="Do not disturb">
>                                                         <j:icon>
> -
>  <js:FontIcon text="{MaterialIconType.DO_NOT_DISTURB}" material="true"/>
> +
>  <js:MaterialIcon text="{MaterialIconType.DO_NOT_DISTURB}" />
>                                                         </j:icon>
>                                                 </j:IconButton>
>                                                 <j:CheckBox
> text="rightPosition" change="ib_lor.rightPosition = !ib_lor.rightPosition"/>
> @@ -242,24 +242,24 @@ limitations under the License.
>                                 <j:CardPrimaryContent>
>                                         <j:IconButton text="print"
> emphasis="primary" outlined="true">
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.PRINT}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.PRINT}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                         <j:IconButton emphasis="secondary"
> outlined="true">
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.FACE}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.FACE}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                         <j:IconButton text="wifi"
> emphasis="emphasized" outlined="true">
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.WIFI}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.WIFI}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>
>                                         <j:HGroup gap="3"
> itemsVerticalAlign="itemsCenter">
>                                                 <j:IconButton
> localId="ib_lor2" text="Do not disturb" outlined="true">
>                                                         <j:icon>
> -
>  <js:FontIcon text="{MaterialIconType.DO_NOT_DISTURB}" material="true"/>
> +
>  <js:MaterialIcon text="{MaterialIconType.DO_NOT_DISTURB}" />
>                                                         </j:icon>
>                                                 </j:IconButton>
>                                                 <j:CheckBox
> text="rightPosition" change="ib_lor2.rightPosition =
> !ib_lor2.rightPosition"/>
> @@ -276,24 +276,24 @@ limitations under the License.
>                                 <j:CardPrimaryContent>
>                                         <j:IconButton text="print"
> emphasis="primary" unboxed="true">
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.PRINT}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.PRINT}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                         <j:IconButton emphasis="secondary"
> unboxed="true">
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.FACE}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.FACE}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                         <j:IconButton text="wifi"
> emphasis="emphasized" unboxed="true">
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.WIFI}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.WIFI}"/>
>                                                 </j:icon>
>                                         </j:IconButton>
>
>                                         <j:HGroup gap="3"
> itemsVerticalAlign="itemsCenter">
>                                                 <j:IconButton
> localId="ib_lor3" text="Do not disturb" unboxed="true">
>                                                         <j:icon>
> -
>  <js:FontIcon text="{MaterialIconType.DO_NOT_DISTURB}" material="true"/>
> +
>  <js:MaterialIcon text="{MaterialIconType.DO_NOT_DISTURB}" />
>                                                         </j:icon>
>                                                 </j:IconButton>
>                                                 <j:CheckBox
> text="rightPosition" change="ib_lor3.rightPosition =
> !ib_lor3.rightPosition"/>
> @@ -357,7 +357,7 @@ limitations under the License.
>                                         </j:ToggleButton>
>                                         <j:ToggleButton>
>                                                 <j:icon>
> -                                                       <js:ToggleFontIcon
> text="{MaterialIconType.VISIBILITY}"
> selectedText="{MaterialIconType.VISIBILITY_OFF}" material="true"/>
> +
>  <js:MaterialToggleIcon text="{MaterialIconType.VISIBILITY}"
> selectedText="{MaterialIconType.VISIBILITY_OFF}" />
>                                                 </j:icon>
>                                                 <j:beads>
>                                                         <j:ToolTip
> toolTip="show/hide FooterBar"/>
> @@ -365,7 +365,7 @@ limitations under the License.
>                                         </j:ToggleButton>
>                                         <j:ToggleButton text="Icon and
> Text" selectedText="Icon and Text" emphasis="{StyledUIBase.SECONDARY}">
>                                                 <j:icon>
> -                                                       <js:ToggleFontIcon
> text="{MaterialIconType.VISIBILITY}"
> selectedText="{MaterialIconType.VISIBILITY_OFF}" material="true"/>
> +
>  <js:MaterialToggleIcon text="{MaterialIconType.VISIBILITY}"
> selectedText="{MaterialIconType.VISIBILITY_OFF}"/>
>                                                 </j:icon>
>                                                 <j:beads>
>                                                         <j:ToolTip
> toolTip="show/hide FooterBar"/>
> @@ -374,19 +374,19 @@ limitations under the License.
>                                         <j:ToggleButton outlined="true"
> emphasis="secondary"
>                              text="Show it" selected="true">
>                              <j:icon>
> -                                <js:ToggleFontIcon
> text="{MaterialIconType.VISIBILITY_OFF}"
> selectedText="{MaterialIconType.VISIBILITY}" material="true"/>
> +                                <js:MaterialToggleIcon
> text="{MaterialIconType.VISIBILITY_OFF}"
> selectedText="{MaterialIconType.VISIBILITY}" />
>                              </j:icon>
>                          </j:ToggleButton>
>                                         <j:ToggleButton unboxed="true"
> emphasis="primary"
>                              text="Show it" selected="true">
>                              <j:icon>
> -                                <js:ToggleFontIcon
> text="{MaterialIconType.VISIBILITY_OFF}"
> selectedText="{MaterialIconType.VISIBILITY}" material="true"/>
> +                                <js:MaterialToggleIcon
> text="{MaterialIconType.VISIBILITY_OFF}"
> selectedText="{MaterialIconType.VISIBILITY}" />
>                              </j:icon>
>                          </j:ToggleButton>
>                                         <j:HGroup gap="3"
> itemsVerticalAlign="itemsCenter">
>                                                 <j:ToggleButton
> localId="tb_lor" text="No Print" selectedText="Print">
>                                                         <j:icon>
> -
>  <js:ToggleFontIcon text="{MaterialIconType.PRINT_DISABLED}"
> selectedText="{MaterialIconType.PRINT}" material="true"/>
> +
>  <js:MaterialToggleIcon text="{MaterialIconType.PRINT_DISABLED}"
> selectedText="{MaterialIconType.PRINT}" />
>                                                         </j:icon>
>                                                 </j:ToggleButton>
>                                                 <j:CheckBox
> selected="true" text="rightPosition" change="tb_lor.rightPosition =
> !tb_lor.rightPosition"/>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/CardPlayGround.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/CardPlayGround.mxml
> index 9220dee..7fc55d7 100644
> --- a/examples/jewel/TourDeJewel/src/main/royale/CardPlayGround.mxml
> +++ b/examples/jewel/TourDeJewel/src/main/royale/CardPlayGround.mxml
> @@ -111,12 +111,12 @@ limitations under the License.
>                                 <j:CardActions
> itemsHorizontalAlign="itemsRight">
>                                         <j:IconButton text="Reply"
> emphasis="primary" outlined="true">
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.REPLY}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.REPLY}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                         <j:IconButton text="Cancel"
> outlined="true">
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.CANCEL}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.CANCEL}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                 </j:CardActions>
> @@ -132,12 +132,12 @@ limitations under the License.
>                                         <j:BarSection
> itemsHorizontalAlign="itemsRight">
>                                                 <j:IconButton
> emphasis="primary" unboxed="true">
>                                                         <j:icon>
> -
>  <js:FontIcon text="{MaterialIconType.SHARE}" material="true"/>
> +
>  <js:MaterialIcon text="{MaterialIconType.SHARE}" />
>                                                         </j:icon>
>                                                 </j:IconButton>
>                                                 <j:IconButton
> unboxed="true">
>                                                         <j:icon>
> -
>  <js:FontIcon text="{MaterialIconType.MORE_VERT}" material="true"/>
> +
>  <js:MaterialIcon text="{MaterialIconType.MORE_VERT}" />
>                                                         </j:icon>
>                                                 </j:IconButton>
>                                         </j:BarSection>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml
> index 1667c51..4bd22d9 100644
> --- a/examples/jewel/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml
> +++ b/examples/jewel/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml
> @@ -90,7 +90,7 @@ limitations under the License.
>                                         <j:BarSection
> itemsHorizontalAlign="itemsRight">
>                                                 <j:IconButton
> unboxed="true" click="assignNewData(watchmenComboBox)">
>                                                         <j:icon>
> -
>  <js:FontIcon text="{MaterialIconType.SETTINGS_BACKUP_RESTORE}"
> material="true"/>
> +
>  <js:MaterialIcon text="{MaterialIconType.SETTINGS_BACKUP_RESTORE}" />
>                                                         </j:icon>
>                                                         <j:beads>
>                                                                 <j:ToolTip
> toolTip="Assign new data"/>
> @@ -131,7 +131,7 @@ limitations under the License.
>                                         <j:BarSection
> itemsHorizontalAlign="itemsRight">
>                                                 <j:IconButton
> unboxed="true" click="assignNewData(avengersComboBox)">
>                                                         <j:icon>
> -
>  <js:FontIcon text="{MaterialIconType.SETTINGS_BACKUP_RESTORE}"
> material="true"/>
> +
>  <js:MaterialIcon text="{MaterialIconType.SETTINGS_BACKUP_RESTORE}" />
>                                                         </j:icon>
>                                                         <j:beads>
>                                                                 <j:ToolTip
> toolTip="Assign new data"/>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
> index 4c8b917..9d0d460 100644
> --- a/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
> +++ b/examples/jewel/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
> @@ -197,7 +197,7 @@ limitations under the License.
>                                                         <j:ToolTip
> toolTip="Clear Data"/>
>                                                 </j:beads>
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.CLEAR}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.CLEAR}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                         <j:IconButton
> click="loadDataProvider(dg1)" emphasis="primary" outlined="true">
> @@ -205,7 +205,7 @@ limitations under the License.
>                                                         <j:ToolTip
> toolTip="Load Data"/>
>                                                 </j:beads>
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.VIEW_HEADLINE}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.VIEW_HEADLINE}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                 </j:CardActions>
> @@ -247,7 +247,7 @@ limitations under the License.
>                                                         <j:ToolTip
> toolTip="Clear Data"/>
>                                                 </j:beads>
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.CLEAR}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.CLEAR}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                         <j:IconButton
> click="loadDataProvider(dg2)" emphasis="primary" outlined="true">
> @@ -255,7 +255,7 @@ limitations under the License.
>                                                         <j:ToolTip
> toolTip="Load Data"/>
>                                                 </j:beads>
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.VIEW_HEADLINE}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.VIEW_HEADLINE}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                 </j:CardActions>
> @@ -295,7 +295,7 @@ limitations under the License.
>                                                         <j:ToolTip
> toolTip="Change Column Labels"/>
>                                                 </j:beads>
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.RESTORE_PAGE}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.RESTORE_PAGE}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                         <j:IconButton
> click="clearBindedDataProvider(dg3)" outlined="true">
> @@ -303,7 +303,7 @@ limitations under the License.
>                                                         <j:ToolTip
> toolTip="Clear Data"/>
>                                                 </j:beads>
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.CLEAR_ALL}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.CLEAR_ALL}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                         <j:IconButton
> click="loadBindedDataProvider(dg3)" emphasis="primary" outlined="true">
> @@ -311,7 +311,7 @@ limitations under the License.
>                                                         <j:ToolTip
> toolTip="Load Data"/>
>                                                 </j:beads>
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.AUTORENEW}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.AUTORENEW}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                 </j:CardActions>
> @@ -351,7 +351,7 @@ limitations under the License.
>                                                         <j:ToolTip
> toolTip="Add Row"/>
>                                                 </j:beads>
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.ADD}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.ADD}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                         <j:IconButton
> click="removeFirstRow(dg4)" outlined="true">
> @@ -359,7 +359,7 @@ limitations under the License.
>                                                         <j:ToolTip
> toolTip="Remove First Row"/>
>                                                 </j:beads>
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.REMOVE}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.REMOVE}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                         <j:IconButton
> click="updateFirstRow(dg4)" emphasis="primary" outlined="true">
> @@ -367,7 +367,7 @@ limitations under the License.
>                                                         <j:ToolTip
> toolTip="Update First Row"/>
>                                                 </j:beads>
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.UPDATE}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.UPDATE}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                         <j:IconButton
> click="removeAllRows(dg4)" emphasis="primary" outlined="true">
> @@ -375,7 +375,7 @@ limitations under the License.
>                                                         <j:ToolTip
> toolTip="Remove all rows"/>
>                                                 </j:beads>
>                                                 <j:icon>
> -                                                       <js:FontIcon
> text="{MaterialIconType.DELETE_FOREVER}" material="true"/>
> +                                                       <js:MaterialIcon
> text="{MaterialIconType.DELETE_FOREVER}" />
>                                                 </j:icon>
>                                         </j:IconButton>
>                                 </j:CardActions>
> diff --git a/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
> index 9ced58e..655b0bc 100644
> --- a/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
> +++ b/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
> @@ -214,7 +214,7 @@ limitations under the License.
>                  <j:BarSection>
>                      <j:IconButton>
>                          <j:icon>
> -                            <js:FontIcon
> text="{MaterialIconType.FEEDBACK}" material="true"/>
> +                            <js:MaterialIcon
> text="{MaterialIconType.FEEDBACK}" />
>                          </j:icon>
>                      </j:IconButton>
>                  </j:BarSection>
> @@ -231,7 +231,7 @@ limitations under the License.
>                          <j:Badge localId="badge" overlap="true"/>
>                      </j:beads>
>                      <j:icon>
> -                        <js:FontIcon
> text="{MaterialIconType.ACCOUNT_BALANCE}" material="true"/>
> +                        <js:MaterialIcon
> text="{MaterialIconType.ACCOUNT_BALANCE}" />
>                      </j:icon>
>                  </j:IconButton>
>                  <j:IconButton click="popup.open = !popup.open">
> @@ -239,7 +239,7 @@ limitations under the License.
>                          <j:Badge text="5" emphasis="secondary"
> subindex="true" overlap="true"/>
>                      </j:beads>
>                      <j:icon>
> -                        <js:FontIcon text="{MaterialIconType.DATA_USAGE}"
> material="true"/>
> +                        <js:MaterialIcon
> text="{MaterialIconType.DATA_USAGE}" />
>                      </j:icon>
>                  </j:IconButton>
>                  <j:PopUp localId="popup"
> closePopUp="popupFormContent.formValidator.removeAllErrorTips()">
> @@ -255,7 +255,7 @@ limitations under the License.
>                          <j:Badge text="27" emphasis="primary"
> preindex="true" overlap="true"/>
>                      </j:beads>
>                      <j:icon>
> -                        <js:FontIcon text="{MaterialIconType.ADD_ALARM}"
> material="true"/>
> +                        <js:MaterialIcon
> text="{MaterialIconType.ADD_ALARM}" />
>                      </j:icon>
>                  </j:IconButton>
>                  <j:IconButton>
> @@ -263,7 +263,7 @@ limitations under the License.
>                          <j:Badge text="209" emphasis="emphasized"
> subindex="true" preindex="true" overlap="true"/>
>                      </j:beads>
>                      <j:icon>
> -                        <js:FontIcon
> text="{MaterialIconType.ANNOUNCEMENT}" material="true"/>
> +                        <js:MaterialIcon
> text="{MaterialIconType.ANNOUNCEMENT}" />
>                      </j:icon>
>                  </j:IconButton>
>              </j:BarSection>
> @@ -278,7 +278,7 @@ limitations under the License.
>                          <j:ResponsiveVisibility desktopVisible="false"
> wideScreenVisible="false" />
>                      </j:beads>
>                      <j:icon>
> -                        <js:FontIcon text="{MaterialIconType.MENU}"
> material="true"/>
> +                        <js:MaterialIcon text="{MaterialIconType.MENU}" />
>                      </j:icon>
>                  </j:IconButton>
>                  <j:BarTitle text="Apache Royale Tour de Jewel"/>
> @@ -289,7 +289,7 @@ limitations under the License.
>                          <j:ToolTip toolTip="Detect Orientation"/>
>                      </j:beads>
>                      <j:icon>
> -                        <js:ToggleFontIcon
> text="{MaterialIconType.SCREEN_LOCK_ROTATION}"
> selectedText="{MaterialIconType.SCREEN_ROTATION}" material="true"/>
> +                        <js:MaterialToggleIcon
> text="{MaterialIconType.SCREEN_LOCK_ROTATION}"
> selectedText="{MaterialIconType.SCREEN_ROTATION}" />
>                      </j:icon>
>                  </j:ToggleButton>
>                  <j:ToggleButton click="footerbar.visible =
> !footerbar.visible">
> @@ -297,7 +297,7 @@ limitations under the License.
>                          <j:ToolTip toolTip="show/hide FooterBar"/>
>                      </j:beads>
>                      <j:icon>
> -                        <js:ToggleFontIcon
> text="{MaterialIconType.VISIBILITY}"
> selectedText="{MaterialIconType.VISIBILITY_OFF}" material="true"/>
> +                        <js:MaterialToggleIcon
> text="{MaterialIconType.VISIBILITY}"
> selectedText="{MaterialIconType.VISIBILITY_OFF}" />
>                      </j:icon>
>                  </j:ToggleButton>
>                  <j:ToggleButton click="toggleTopAppBarFixed()">
> @@ -305,7 +305,7 @@ limitations under the License.
>                          <j:ToolTip toolTip="Lock(fix) or Unlock the
> TopBar"/>
>                      </j:beads>
>                      <j:icon>
> -                        <js:ToggleFontIcon text="{MaterialIconType.LOCK}"
> selectedText="{MaterialIconType.LOCK_OPEN}" material="true"/>
> +                        <js:MaterialToggleIcon
> text="{MaterialIconType.LOCK}" selectedText="{MaterialIconType.LOCK_OPEN}"
> />
>                      </j:icon>
>                  </j:ToggleButton>
>              </j:BarSection>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/MiscelaneaPlayGound.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/MiscelaneaPlayGound.mxml
> index 1d27af2..c9fc92e 100644
> --- a/examples/jewel/TourDeJewel/src/main/royale/MiscelaneaPlayGound.mxml
> +++ b/examples/jewel/TourDeJewel/src/main/royale/MiscelaneaPlayGound.mxml
> @@ -42,13 +42,13 @@ limitations under the License.
>              <j:Card>
>                  <html:H3 text="Jewel Icons Sizes"/>
>
> -                <js:FontIcon text="{MaterialIconType.FACE}"
> material="true" size="18"/>
> +                <js:MaterialIcon text="{MaterialIconType.FACE}"
> size="18"/>
>                  <j:Label text="18px"/>
> -                <js:FontIcon text="{MaterialIconType.FACE}"
> material="true" size="24"/>
> +                <js:MaterialIcon text="{MaterialIconType.FACE}"
> size="24"/>
>                  <j:Label text="24px (default)"/>
> -                <js:FontIcon text="{MaterialIconType.FACE}"
> material="true" size="36"/>
> +                <js:MaterialIcon text="{MaterialIconType.FACE}"
> size="36"/>
>                  <j:Label text="36px"/>
> -                <js:FontIcon text="{MaterialIconType.FACE}"
> material="true" size="48"/>
> +                <js:MaterialIcon text="{MaterialIconType.FACE}"
> size="48"/>
>                  <j:Label text="48px"/>
>              </j:Card>
>          </j:GridCell>
> @@ -57,13 +57,13 @@ limitations under the License.
>              <j:Card>
>                  <html:H3 text="Jewel Icons Dark / Light"/>
>
> -                <js:FontIcon text="{MaterialIconType.FACE}"
> material="true" dark="true"/>
> +                <js:MaterialIcon text="{MaterialIconType.FACE}"
> dark="true"/>
>                  <j:Label text="dark"/>
> -                <js:FontIcon text="{MaterialIconType.FACE}"
> material="true" dark="true" inactive="true"/>
> +                <js:MaterialIcon text="{MaterialIconType.FACE}"
> dark="true" inactive="true"/>
>                  <j:Label text="dark - inactive"/>
> -                <js:FontIcon text="{MaterialIconType.FACE}"
> material="true" light="true"/>
> +                <js:MaterialIcon text="{MaterialIconType.FACE}"
> light="true"/>
>                  <j:Label text="light"/>
> -                <js:FontIcon text="{MaterialIconType.FACE}"
> material="true" light="true" inactive="true"/>
> +                <js:MaterialIcon text="{MaterialIconType.FACE}"
> light="true" inactive="true"/>
>                  <j:Label text="light - inactive"/>
>              </j:Card>
>          </j:GridCell>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/TablePlayGround.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/TablePlayGround.mxml
> index a3c85a7..fcc1a89 100644
> --- a/examples/jewel/TourDeJewel/src/main/royale/TablePlayGround.mxml
> +++ b/examples/jewel/TourDeJewel/src/main/royale/TablePlayGround.mxml
> @@ -71,7 +71,7 @@ limitations under the License.
>                                         <j:TBody>
>                                                 <j:TableRow>
>                                                         <j:TableCell>
> -
>  <js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
> +
>  <js:MaterialIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" />
>                                                         </j:TableCell>
>                                                         <j:TableCell
> expandRows="2">
>                                                                 <j:Label
> text="Some text in two rows" multiline="true"/>
> @@ -93,7 +93,7 @@ limitations under the License.
>                                                 </j:TableRow>
>                                                 <j:TableRow>
>                                                         <j:TableCell>
> -
>  <js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
> +
>  <js:MaterialIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" />
>                                                         </j:TableCell>
>
>                                                         <j:TableCell>
> @@ -113,7 +113,7 @@ limitations under the License.
>                                                 </j:TableRow>
>                                                 <j:TableRow>
>                                                         <j:TableCell>
> -
>  <js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
> +
>  <js:MaterialIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" />
>                                                         </j:TableCell>
>                                                         <j:TableCell>
>                                                                 <j:Label
> text="More text 2" />
> @@ -135,7 +135,7 @@ limitations under the License.
>                                                 </j:TableRow>
>                                                 <j:TableRow>
>                                                         <j:TableCell>
> -
>  <js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
> +
>  <js:MaterialIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" />
>                                                         </j:TableCell>
>                                                         <j:TableCell>
>                                                                 <!-- By
> using a Group within a cell you have better control of the
> @@ -173,7 +173,7 @@ limitations under the License.
>
>               <j:TextPrompt prompt="Search..."/>
>
>       </j:beads>
>
>       <j:icon>
> -
>              <js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
> +
>              <js:MaterialIcon text="{MaterialIconType.SEARCH}" />
>
>       </j:icon>
>
> </j:IconTextInput>
>
> <j:Button text="SEARCH" emphasis="{StyledUIBase.PRIMARY}"/>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/TextInputPlayGround.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/TextInputPlayGround.mxml
> index f266f6c..69fe4ed 100644
> --- a/examples/jewel/TourDeJewel/src/main/royale/TextInputPlayGround.mxml
> +++ b/examples/jewel/TourDeJewel/src/main/royale/TextInputPlayGround.mxml
> @@ -211,7 +211,7 @@ limitations under the License.
>
>                                 <j:IconTextInput text="Searching
> something">
>                                         <j:icon>
> -                                               <js:FontIcon
> text="{MaterialIconType.SEARCH}" material="true"/>
> +                                               <js:MaterialIcon
> text="{MaterialIconType.SEARCH}" />
>                                         </j:icon>
>                                 </j:IconTextInput>
>
> @@ -220,7 +220,7 @@ limitations under the License.
>                                                 <j:TextPrompt
> prompt="Search..."/>
>                                         </j:beads>
>                                         <j:icon>
> -                                               <js:FontIcon
> text="{MaterialIconType.SEARCH}" material="true"/>
> +                                               <js:MaterialIcon
> text="{MaterialIconType.SEARCH}" />
>                                         </j:icon>
>                                 </j:IconTextInput>
>
> @@ -230,7 +230,7 @@ limitations under the License.
>                                                 <j:Disabled/>
>                                         </j:beads>
>                                         <j:icon>
> -                                               <js:FontIcon
> text="{MaterialIconType.SEARCH}" material="true"/>
> +                                               <js:MaterialIcon
> text="{MaterialIconType.SEARCH}" />
>                                         </j:icon>
>                                 </j:IconTextInput>
>
> @@ -240,7 +240,7 @@ limitations under the License.
>                                                 <j:Disabled/>
>                                         </j:beads>
>                                         <j:icon>
> -                                               <js:FontIcon
> text="{MaterialIconType.SEARCH}" material="true"/>
> +                                               <js:MaterialIcon
> text="{MaterialIconType.SEARCH}" />
>                                         </j:icon>
>                                 </j:IconTextInput>
>
> @@ -249,7 +249,7 @@ limitations under the License.
>                                                 <j:SizeControl
> size="xlarge"/>
>                                         </j:beads>
>                                         <j:icon>
> -                                               <js:FontIcon
> text="{MaterialIconType.SEARCH}" material="true"/>
> +                                               <js:MaterialIcon
> text="{MaterialIconType.SEARCH}" />
>                                         </j:icon>
>                                 </j:IconTextInput>
>                         </j:Card>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/WelcomeSection.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/WelcomeSection.mxml
> index 384171a..4303427 100644
> --- a/examples/jewel/TourDeJewel/src/main/royale/WelcomeSection.mxml
> +++ b/examples/jewel/TourDeJewel/src/main/royale/WelcomeSection.mxml
> @@ -136,7 +136,7 @@ limitations under the License.
>                      <j:SizeControl size="xlarge"/>
>                  </j:beads>
>                  <j:icon>
> -                    <js:FontIcon text="{MaterialIconType.SEARCH}"
> material="true"/>
> +                    <js:MaterialIcon text="{MaterialIconType.SEARCH}" />
>                  </j:icon>
>              </j:IconTextInput>
>              <j:Button text="Search" emphasis="secondary">
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/WizardPlayGround.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/WizardPlayGround.mxml
> index 79e2222..7e56642 100644
> --- a/examples/jewel/TourDeJewel/src/main/royale/WizardPlayGround.mxml
> +++ b/examples/jewel/TourDeJewel/src/main/royale/WizardPlayGround.mxml
> @@ -72,7 +72,7 @@ limitations under the License.
>                                                 <j:Group>
>                                                         <j:IconButton
> emphasis="{StyledUIBase.SECONDARY}">
>                                                                 <j:icon>
> -
>  <js:FontIcon text="{MaterialIconType.KEYBOARD_ARROW_LEFT}" material="true"
> size="48"/>
> +
>  <js:MaterialIcon text="{MaterialIconType.KEYBOARD_ARROW_LEFT}"  size="48"/>
>                                                                 </j:icon>
>                                                         </j:IconButton>
>                                                 </j:Group>
> @@ -82,7 +82,7 @@ limitations under the License.
>                                                 <j:Group>
>                                                         <j:IconButton
> emphasis="{StyledUIBase.SECONDARY}">
>                                                                 <j:icon>
> -
>  <js:FontIcon text="{MaterialIconType.KEYBOARD_ARROW_RIGHT}"
> material="true" size="48"/>
> +
>  <js:MaterialIcon text="{MaterialIconType.KEYBOARD_ARROW_RIGHT}"
> size="48"/>
>                                                                 </j:icon>
>                                                         </j:IconButton>
>                                                 </j:Group>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/AdvancedIconListItemRenderer.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/AdvancedIconListItemRenderer.mxml
> index 47185f4..5ce2503 100644
> ---
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/AdvancedIconListItemRenderer.mxml
> +++
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/AdvancedIconListItemRenderer.mxml
> @@ -85,8 +85,8 @@ limitations under the License.
>          <js:ItemRendererDataBinding/>
>      </j:beads>
>
> -    <js:FontIcon text="{iconListItem ? iconListItem.icon : ''}"
> -                material="true"
> +    <js:MaterialIcon text="{iconListItem ? iconListItem.icon : ''}"
> +
>                  visible="{iconListItem ? iconListItem.icon != null :
> false}"
>                  className="{colorClass}"
>                  click="clickCloseButton()"/>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconDataGridItemRenderer.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconDataGridItemRenderer.mxml
> index 18eb319..299fe3f 100644
> ---
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconDataGridItemRenderer.mxml
> +++
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconDataGridItemRenderer.mxml
> @@ -50,7 +50,7 @@ limitations under the License.
>          <j:HorizontalCenteredLayout/>
>      </j:beads>
>
> -    <js:FontIcon text="{iconList ? iconList.icon : ''}" material="true"
> +    <js:MaterialIcon text="{iconList ? iconList.icon : ''}"
>          visible="{iconList ? iconList.icon != null : false}"
>          click="clickCloseButton(event)"/>
>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconListItemRenderer.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconListItemRenderer.mxml
> index d9c7b69..d22dfc0 100644
> ---
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconListItemRenderer.mxml
> +++
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/IconListItemRenderer.mxml
> @@ -60,7 +60,7 @@ limitations under the License.
>          <js:ToolTipRemovalWhenItemRemoved tooltip="{tt}"/>
>      </j:beads>
>
> -    <js:FontIcon text="{iconList ? iconList.icon : ''}" material="true"
> visible="{iconList ? iconList.icon != null : false}"
> click="clickCloseButton()"/>
> +    <js:MaterialIcon text="{iconList ? iconList.icon : ''}"
> visible="{iconList ? iconList.icon != null : false}"
> click="clickCloseButton()"/>
>
>      <j:Label html="{text}" multiline="true"/>
>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml
> index 5f8bec9..182238e 100644
> ---
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml
> +++
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml
> @@ -81,11 +81,11 @@ limitations under the License.
>          <js:ItemRendererDataBinding />
>      </j:beads>
>
> -    <js:FontIcon text="{navlink ? navlink.icon : ''}" material="true"
> visible="{navlink ? navlink.icon != null : false}"/>
> +    <js:MaterialIcon text="{navlink ? navlink.icon : ''}"
> visible="{navlink ? navlink.icon != null : false}"/>
>
>      <html:Span className="navigation-section-title" text="{text}"/>
>
> -    <js:FontIcon text="{open? MaterialIconType.EXPAND_LESS:
> MaterialIconType.EXPAND_MORE}" material="true" className="hint"
> +    <js:MaterialIcon text="{open? MaterialIconType.EXPAND_LESS:
> MaterialIconType.EXPAND_MORE}"  className="hint"
>                  visible="{navlink.subMenu != null}" />
>
>  </j:CollapsibleNavigationSectionRenderer>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationIconLinkItemRenderer.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationIconLinkItemRenderer.mxml
> index d95520e..f9a6644 100644
> ---
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationIconLinkItemRenderer.mxml
> +++
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationIconLinkItemRenderer.mxml
> @@ -39,7 +39,7 @@ limitations under the License.
>          <js:ItemRendererDataBinding />
>      </j:beads>
>
> -    <js:FontIcon text="{navlink ? navlink.icon : ''}" material="true"
> visible="{navlink ? navlink.icon != null : false}"/>
> +    <js:MaterialIcon text="{navlink ? navlink.icon : ''}"
> visible="{navlink ? navlink.icon != null : false}"/>
>
>      <html:Span text="{navlink ? navlink.label : ''}"/>
>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/SimpleIconListItemRenderer.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/SimpleIconListItemRenderer.mxml
> index b0613b1..359edaa 100644
> ---
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/SimpleIconListItemRenderer.mxml
> +++
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/SimpleIconListItemRenderer.mxml
> @@ -39,7 +39,7 @@ limitations under the License.
>      </j:beads>
>
>      <j:HGroup gap="6" itemsVerticalAlign="itemsCenter">
> -        <js:FontIcon text="{iconList.icon}" material="true"
> visible="{iconList.icon != null}"/>
> +        <js:MaterialIcon text="{iconList.icon}"  visible="{iconList.icon
> != null}"/>
>          <j:Label html="{text}"/>
>      </j:HGroup>
>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml
> index a7f92f4..26f8828 100644
> ---
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml
> +++
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml
> @@ -40,7 +40,7 @@ limitations under the License.
>      </j:beads>
>
>      <j:HGroup gap="4" itemsVerticalAlign="itemsCenter">
> -        <js:FontIcon text="{tabButton ? tabButton.icon : ''}"
> material="true"
> +        <js:MaterialIcon text="{tabButton ? tabButton.icon : ''}"
>                      visible="{tabButton ? tabButton.icon != null :
> false}"/>
>          <html:Span text="{tabButton ? tabButton.label : ''}"/>
>      </j:HGroup>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
> index f31faaf..b323763 100644
> ---
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
> +++
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
> @@ -40,7 +40,7 @@ limitations under the License.
>      </j:beads>
>
>      <j:VGroup itemsHorizontalAlign="itemsCenter">
> -        <js:FontIcon text="{tabButton ? tabButton.icon : ''}"
> material="true"
> +        <js:MaterialIcon text="{tabButton ? tabButton.icon : ''}"
>                      visible="{tabButton ? tabButton.icon != null :
> false}"/>
>          <html:Span text="{tabButton ? tabButton.label : ''}"/>
>      </j:VGroup>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
> index ddc608a..9bfb4b8 100644
> ---
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
> +++
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
> @@ -44,7 +44,7 @@ limitations under the License.
>
>      <j:IconButton emphasis="primary" width="24" height="24"
> style="padding: 0px; border-radius: 50%" click="clickCloseButton()">
>          <j:icon>
> -            <js:FontIcon text="{MaterialIconType.CLOSE}" material="true"
> size="18"/>
> +            <js:MaterialIcon text="{MaterialIconType.CLOSE}"  size="18"/>
>          </j:icon>
>      </j:IconButton>
>
> diff --git
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableStyleListItemRenderer.mxml
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableStyleListItemRenderer.mxml
> index 5f0c5e3..b164048 100644
> ---
> a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableStyleListItemRenderer.mxml
> +++
> b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TableStyleListItemRenderer.mxml
> @@ -27,7 +27,7 @@ limitations under the License.
>          <j:HorizontalLayout/>
>      </ir:beads>
>
> -    <js:FontIcon text="{iconList ? iconList.icon : ''}" material="true"
> visible="{iconList ? iconList.icon != null : false}"
> click="clickCloseButton()" width="100"/>
> +    <js:MaterialIcon text="{iconList ? iconList.icon : ''}"
> visible="{iconList ? iconList.icon != null : false}"
> click="clickCloseButton()" width="100"/>
>      <j:Label html="{text}" multiline="true" width="300"/>
>      <j:Label html="Third field" multiline="true" width="100"/>
>      <j:Label html="Fourth field" multiline="true" width="200"/>
>
>

-- 

Piotr Zarzycki

Patreon: *https://www.patreon.com/piotrzarzycki
<https://www.patreon.com/piotrzarzycki>*