add md info

Author: tsonevn

app/ng-ui-widgets-category/action-bar/icon-fonts/article.md

@@ -1,8 +1,6 @@
-The title of the ActionBar can be easily set by its corresponding property - `title`. You can additionally set an icon to use in your ActionBar on Android with the `icon` property.
+### Icon Fonts in ActionBar
 
-Here’s what a basic usage of the `title` and `icon` properties looks like:
-<snippet id='action-bar-title-icon-html'/>
+Using the `font://` prefix, you can load a resource in the ActionItem while setting up an icon code provided by an icon font. By setting up this prefix, a new image will be generated, which will be set as an ActionItem's `icon` resource. While using this functionality, we need to specify the `font-size`, which will calculate the size of the generated image base on the device's dpi.
 
-The icon can only be set in Android platform. It is hidden by default, but you can explicitly control its visibility with the `android.iconVisibility' property.
-
-Furthermore, the title can be customized by placing a content component (button, label, layout-components, etc.) directly in the ActionBar.
+<snippet id='actionbar-icon-fonts-html'/>
+<snippet id='actionbar-icon-fonts-css-ng'/>

app/ng-ui-widgets-category/action-bar/icon-fonts/icon-fonts.component.css

@@ -1,14 +1,12 @@
-/* >> action-bar-icon-fonts-css-ng */
+/* >> actionbar-icon-fonts-css-ng */
 .font-awesome {
     font-family: "Font Awesome 5 Free", "fa-regular-400";
 }
-/* << action-bar-icon-fonts-css-ng */
+
 .font-size {
     font-size: 48;
-    width: 48;
-    height: 48;
 }
-
+/* << actionbar-icon-fonts-css-ng */
 .color {
     color: blue;
 }

app/ng-ui-widgets-category/action-bar/icon-fonts/icon-fonts.component.html

@@ -1,5 +1,5 @@
 <StackLayout sdkToggleNavButton>
-<!-- >> action-bar-icon-fonts-html -->
+<!-- >> actionbar-icon-fonts-html -->
 <ActionBar title=" NativeScript" android.icon="res://icon" android.iconVisibility="always">
    <!-- >> (hide) -->
    <NavigationButton text="Back" visibility="collapsed" ></NavigationButton>
@@ -8,5 +8,5 @@
 
                 <ActionItem icon="font://&#xF141;" style="font-family:'Font Awesome 5 Free', 'fa-regular-400';" class="font-size color" ios.position="right"></ActionItem>
 </ActionBar>
-<!-- << action-bar-icon-fonts-html -->
+<!-- << actionbar-icon-fonts-html -->
 </StackLayout>

app/ng-ui-widgets-category/image/icon-fonts/article.md

@@ -1,34 +1,6 @@
-### Create Image via HTML
-The `src` property can accept local and remote paths. 
-It can also accept paths and `ImageSource` instances bind via code behind.
-<snippet id='creating-image-html'/>
+### Icon Fonts in Image
 
-### Create Image dynamically via TypeScript
-<snippet id='creating-image-code'/>
+Using the `font://` prefix, you can load a resource image while setting up an icon code provided by an icon font. By setting up this prefix, a new image will be generated, which will be set as an ImageView resource. While using this functionality, we need to specify the `font-size`, which will calculate the size of the generated image base on the device's dpi. For further configuration on size of the displayed image, we can config the view's `width` and `height` properties.
 
-### Background Image via CSS
-Use property `background-image` to apply image via CSS.
-<snippet id='css-load-background'/>
-<snippet id='load-image-css'/>
-
-### Image with ImageSource from Base64 String
-Convert an image to and from Base64 encoded string using `toBase64String` and `fromBase64` methods.
-Then create an `ImageSource` instance and bind it to the `src` property of `Image`.
-<snippet id='creating-img-from-base'/>
-<snippet id='load-image-base-html'/>
-
-### Setting image stretching
-
-The stretch functionality allows us to describe how content is resized to fill its allocated space.
-The available options for this property are as follow:
-
-* `none` - the image preserves its original size
-* `fill` - the image is resized to fill the destination dimensions. In this case, the aspect ratio is not preserved.
-* `aspectFit` - the image is resized to fit the destination dimensions while it preserves its native aspect ratio. If the aspect ratio of the destination rectangle differs from the image, the image will be clipped to fit in the destination.
-* `aspectFill` - the image is resized to fill in the destination dimensions while it preserves its native aspect ratio.
-
-The default value for this property is `aspectFit`.
-
-<snippet id='image-stretch'/>
-
-In the above sample code, we set up the Image `stretch` property to `none`. This means that the image will be shown on the screen with its original size.
+<snippet id='image-icon-fonts-html'/>
+<snippet id='image-icon-fonts-css-ng'/>

app/ng-ui-widgets-category/image/icon-fonts/icon-fonts.component.css

@@ -1,18 +1,17 @@
-/* >> css-image-icon-fonts */
 Image {
     height: 60;
     margin: 16;
     width: 60;
 }
+/* >> image-icon-fonts-css-ng */
 .font-awesome {
     font-family: "Font Awesome 5 Free", "fa-regular-400";
 }
 
 .font-size {
     font-size: 96;
 }
-
+/* << image-icon-fonts-css-ng */
 .color {
     color: blue;
 }
-/* << css-image-icon-fonts */

app/ng-ui-widgets-category/image/icon-fonts/icon-fonts.component.html

@@ -1,12 +1,14 @@
 <ScrollView sdkExampleTitle sdkToggleNavButton>
+    <!-- >> image-icon-fonts-html -->
     <GridLayout rows="*, *, *" columns="*, *" height="300" verticalAlignment="middle">
-        <!-- font family only -->
+
         <Image row="0" col="0" src="font://&#xF2b9;" class="font-awesome"></Image>
-        <!-- font family + font size -->
+
         <Image row="0" col="1" src="font://&#xF557;" class="font-awesome font-size"></Image>
-        <!-- font family + color -->
+
         <Image row="1" col="0" src="font://&#xF433;" style="font-family: 'Font Awesome 5 Free', 'fa-regular-400';" class="font-awesome color"></Image>
-        <!-- font family + font size + color -->
+
         <Image row="1" col="1" src="font://&#xF240;" class="font-awesome font-size color"></Image>
     </GridLayout>
+    <!-- << image-icon-fonts-html -->
 </ScrollView>