test both image and font based icons

Author: jcassidyav

demo-ng/package.json

@@ -2,6 +2,7 @@
     "description": "NativeScript Application",
     "main": "src/main.ts",
     "dependencies": {
+        "@mdi/font": "4.9.95",
         "@angular/animations": "~11.2.7",
         "@angular/common": "~11.2.7",
         "@angular/compiler": "~11.2.7",

demo-ng/src/app.css

@@ -1,6 +1,8 @@
 @import '@nativescript/theme/css/core.css';
 @import '@nativescript/theme/css/default.css';
-
+.mdi {
+    font-family: 'materialdesignicons-webfont', 'Material Design Icons';
+}
 MDTabStrip {
     selected-item-color: #FFFFFF;
     un-selected-item-color: #404040;

demo-ng/src/app/examples/tabs/tabs.component.html

@@ -11,7 +11,7 @@
     </MDTabStripItem>
     <MDTabStripItem>
       <Label text="Search"></Label>
-      <Image src="res://ic_menu"></Image>
+      <Image src="font://&#xF349;" class="mdi"></Image>
     </MDTabStripItem>
   </MDTabStrip>
 

demo-ng/src/main.ts

@@ -1,8 +1,15 @@
 // this import should be first in order to load some required settings (like globals and reflect-metadata)
 import { platformNativeScriptDynamic } from "@nativescript/angular";
-
+import { themer } from '@nativescript-community/ui-material-core';
 import { AppModule } from './app/app.module';
 
+if (global.isIOS) {
+    themer.setPrimaryColor('#bff937');
+    themer.setPrimaryColorVariant('#33B5E5');
+    themer.setAccentColor('#ff8a39');
+    themer.setSecondaryColor('#a830d7');
+}
+
 // A traditional NativeScript application starts by initializing global objects,
 // setting up global CSS rules, creating, and navigating to the main page.
 // Angular applications need to take care of their own initialization:

demo-ng/webpack.config.js

@@ -6,6 +6,16 @@ module.exports = (env) => {
 	// Learn how to customize:
 	// https://docs.nativescript.org/webpack
 
+	// Example: copy all files from a dependency
+	webpack.Utils.addCopyRule({
+		from: '@mdi/font/fonts/materialdesignicons-webfont.ttf',
+		to: 'fonts',
+		// the context of the "from" rule, in this case node_modules
+		// we used the getProjectFilePath util here, but this could have been
+		// a path.resolve(__dirname, 'node_modules') too.
+		context: webpack.Utils.project.getProjectFilePath('node_modules')
+	})
+
 	return webpack.resolveConfig();
 };