diff --git a/docs/FAB.md b/docs/FAB.md
index 0b22522..53d79a8 100644
--- a/docs/FAB.md
+++ b/docs/FAB.md
@@ -27,8 +27,9 @@ There are 9 Styles of FABs: 1. Secondary,  2. Surface,  3. Tertiary,  4. SmallSe
 | name             | type        | defalut | describes                             |
 | ---------------- | ----------- | ------- | ------------------------------------- |
 | Text             | string      | empty   | FAB's text                            |
-| Icon             | IconKind    | none    | FAB's icon                            |
-| IconSource       | SkPicture   |         | FAB's icon                            |
+| IconKind         | IconKind    | none    | FAB's icon from iconkind.             |
+| IconSource       | SkPicture   |         | FAB's icon from file.                 |
+| IconData         | string      | empty   | FAB's icon from path data.            |
 | IsExtended       | bool        | false   | FAB's extended state                  |
 | BackgroundColour | Color       | style   | FAB's background color.               |
 | ForegroundColor  | Color       | style   | FAB's foreground color.               |
diff --git a/docs/button.md b/docs/button.md
index 5b96767..dede588 100644
--- a/docs/button.md
+++ b/docs/button.md
@@ -26,9 +26,10 @@ There are 5 Styles of buttons: 1. Elevated, 2. Filled,  3. FilledTonal , 4. Outl
 
 | name             | type        | defalut | describes                                |
 | ---------------- | ----------- | ------- | ---------------------------------------- |
-| Text             | string      | empty   | button's text                            |
-| Icon             | IconKind    | none    | button's icon                            |
-| IconSource       | SkPicture   |         | button's icon                            |
+| Text             | string      | empty   | button's text.                           |
+| IconKind         | IconKind    | none    | button's icon from iconkind.             |
+| IconSource       | SkPicture   |         | button's icon from file.                 |
+| IconData         | string      | empty   | button's icon from path data.            |
 | BackgroundColour | Color       | style   | button's background color.               |
 | ForegroundColor  | Color       | style   | button's foreground color.               |
 | FontFamily       | string      |         | font family of the button's text.        |
diff --git a/docs/chip.md b/docs/chip.md
index 2988bd9..e9f12dc 100644
--- a/docs/chip.md
+++ b/docs/chip.md
@@ -33,8 +33,9 @@ There are 7 styles of chips: 1. Assist,  2. AssistElevated,  3. Filter,  4. Filt
 | IsChecked        | bool      | false   | chip's selected state(only support Filter and FilterElevated style). |
 | HasCloseIcon     | bool      | false   | show or hide close-icon of the chip.                         |
 | Text             | string    | empty   | chip's text.                                                 |
-| Icon             | IconKind  | none    | chip's icon                                                  |
-| IconSource       | SkPicture |         | chip's icon                                                  |
+| IconKind         | IconKind  | none    | chip's icon from iconkind.                                   |
+| IconSource       | SkPicture |         | chip's icon from file.                                       |
+| IconData         | string    | empty   | chip's icon from path data.                                  |
 | IconColor        | Color     | style   | chip's icon color                                            |
 | BackgroundColour | Color     | style   | chip's background color                                      |
 | ForegroundColor  | Color     | style   | chip's foreground color                                      |
diff --git a/docs/context-menu.md b/docs/context-menu.md
index bd9c56f..98299a0 100644
--- a/docs/context-menu.md
+++ b/docs/context-menu.md
@@ -39,8 +39,9 @@ ContextMenu display a list of choices on a temporary surface, It can be included
 | name             | type      | default | describes                                  |
 | ---------------- | --------- | ------- | ------------------------------------------ |
 | Text             | string    | empty   | MenuItem's text.                           |
-| Icon             | IconKind  | none    | MenuItem's Icon.                           |
-| IconSource       | SkPicture |         | MenuItem's icon                            |
+| IconKind         | IconKind  | none    | MenuItem's icon from iconkind.             |
+| IconSource       | SkPicture |         | MenuItem's icon from file.                 |
+| IconData         | string    | empty   | MenuItem's icon from path data.            |
 | BackgroundColour | Color     | style   | MenuItem's background color.               |
 | ForegroundColor  | Color     | style   | MenuItem's foreground color.               |
 | FontFamily       | string    |         | font family of the MenuItem's text.        |
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 7e05176..19d2d7b 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -60,7 +60,7 @@
                    <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                    <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
                    <mds:MaterialStyles />
-                   <!--or use seendColor
+                   <!--or use seedColor
                    <mds:MaterialStyles Dark="DarkBlue" Light="Green" />-->
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
diff --git a/docs/icon-button.md b/docs/icon-button.md
index 5afc5c8..82ec694 100644
--- a/docs/icon-button.md
+++ b/docs/icon-button.md
@@ -25,8 +25,9 @@ There are 4 Styles of icon buttons: 1. Filled, 2. FilledTonal , 3. Outlined, 4.
 
 | name             | type        | defalut | describes                             |
 | ---------------- | ----------- | ------- | ------------------------------------- |
-| Icon             | IconKind    | none    | button's icon                         |
-| IconSource       | SkPicture   |         | button's icon                         |
+| IconKind         | IconKind    | none    | button's icon from iconkind.          |
+| IconSource       | SkPicture   |         | button's icon from file.              |
+| IconData         | string      | empty   | button's icon from path data.         |
 | BackgroundColour | Color       | style   | button's background color.            |
 | ForegroundColor  | Color       | style   | button's foreground color.            |
 | Shape            | Shape       | style   | corner radius of the button's border. |
diff --git a/docs/icon-kind.md b/docs/icon-kind.md
new file mode 100644
index 0000000..a4881c4
--- /dev/null
+++ b/docs/icon-kind.md
@@ -0,0 +1,3 @@
+# IconKind
+
+IconKind uses the material icon from Google by default, you can be browsed at https://fonts.google.com/icons.
\ No newline at end of file
diff --git a/docs/navigation-bar.md b/docs/navigation-bar.md
index 8531f3a..42e0325 100644
--- a/docs/navigation-bar.md
+++ b/docs/navigation-bar.md
@@ -47,23 +47,25 @@ Navigation bars offer a persistent and convenient way to switch between primary
 
 ## NavigationBarItem Properties
 
-| name                 | type      | default | describes                                           |
-| -------------------- | --------- | ------- | --------------------------------------------------- |
-| Content              | View      |         | NavigationBarItem's contain content.                |
-| Text                 | string    | empty   | NavigationBarItem's text.                           |
-| Icon                 | IconKind  | none    | NavigationBarItem's icon.                           |
-| IconSource           | SkPicture |         | NavigationBarItem's icon.                           |
-| ActivedIcon          | IconKind  | none    | NavigationBarItem's icon when actived.              |
-| ActivedIconSource    | SkPicture |         | NavigationBarItem's icon when actived.              |
-| ActiveIndicatorColor | Color     | style   | NavigationBarItem's activeIndicator color.          |
-| IconColor            | Color     | style   | NavigationBarItem's icon color.                     |
-| BackgroundColour     | Color     | style   | NavigationBarItem's background color.               |
-| ForegroundColor      | Color     | style   | NavigationBarItem's foreground color.               |
-| FontFamily           | string    |         | font family of the NavigationBarItem's text.        |
-| FontSize             | float     | 14      | font size of the NavigationBarItem's text.          |
-| FontWeight           | int       | 400     | font weight of the NavigationBarItem's text.        |
-| FontItalic           | bool      | false   | enable font italic of the NavigationBarItem's text. |
-| RippleColor          | Color     | style   | NavigationBarItem's ripple color.                   |
+| name                 | type      | default | describes                                             |
+| -------------------- | --------- | ------- | ----------------------------------------------------- |
+| Content              | View      |         | NavigationBarItem's contain content.                  |
+| Text                 | string    | empty   | NavigationBarItem's text.                             |
+| IconKind             | IconKind  | none    | NavigationBarItem's icon from iconkind.               |
+| IconSource           | SkPicture |         | NavigationBarItem's icon from file.                   |
+| IconData             | string    | empty   | NavigationBarItem's icon from path data.              |
+| ActivedIconKind      | IconKind  | none    | NavigationBarItem's icon from iconkind when actived.  |
+| ActivedIconSource    | SkPicture |         | NavigationBarItem's icon from file when actived.      |
+| ActivedIconData      | string    | empty   | NavigationBarItem's icon from path data when actived. |
+| ActiveIndicatorColor | Color     | style   | NavigationBarItem's activeIndicator color.            |
+| IconColor            | Color     | style   | NavigationBarItem's icon color.                       |
+| BackgroundColour     | Color     | style   | NavigationBarItem's background color.                 |
+| ForegroundColor      | Color     | style   | NavigationBarItem's foreground color.                 |
+| FontFamily           | string    |         | font family of the NavigationBarItem's text.          |
+| FontSize             | float     | 14      | font size of the NavigationBarItem's text.            |
+| FontWeight           | int       | 400     | font weight of the NavigationBarItem's text.          |
+| FontItalic           | bool      | false   | enable font italic of the NavigationBarItem's text.   |
+| RippleColor          | Color     | style   | NavigationBarItem's ripple color.                     |
 
 
 
diff --git a/docs/navigation-drawer.md b/docs/navigation-drawer.md
index e4dc2e2..76af765 100644
--- a/docs/navigation-drawer.md
+++ b/docs/navigation-drawer.md
@@ -44,19 +44,22 @@ Navigation drawers provide ergonomic access to destinations in an app.
 
 ## NavigationDrawerItem Properties
 
-| name                 | type   | default                 | describes                                              |
-| -------------------- | ------ | ----------------------- | ------------------------------------------------------ |
-| Title                | string | empty                   | NavigationDrawerItem's title.                          |
-| Text                 | string | empty                   | NavigationDrawerItem's Text.                           |
-| ContentType          | Type   |                         | NavigationDrawerItem's contain content type.           |
-| ActiveIndicatorColor |        | SecondaryContainerColor | NavigationDrawerItem's activeIndicator color.          |
-| BackgroundColour     | Color  | Transparent             | NavigationDrawerItem's background color.               |
-| ForegroundColor      | Color  | OnSurfaceVariantColor   | NavigationDrawerItem's foreground color.               |
-| FontFamily           | string |                         | font family of the NavigationDrawerItem's text.        |
-| FontSize             | float  | 14                      | font size of the NavigationDrawerItem's text.          |
-| FontWeight           | int    | 500                     | font weight of the NavigationDrawerItem's text.        |
-| FontItalic           | bool   | false                   | enable font italic of the NavigationDrawerItem's text. |
-| RippleColor          | Color  | SurfaceTintColor        | NavigationDrawerItem's ripple color.                   |
+| name                 | type      | default                 | describes                                              |
+| -------------------- | --------- | ----------------------- | ------------------------------------------------------ |
+| Title                | string    | empty                   | NavigationDrawerItem's title.                          |
+| Text                 | string    | empty                   | NavigationDrawerItem's Text.                           |
+| ContentType          | Type      |                         | NavigationDrawerItem's contain content type.           |
+| IconKind             | IconKind  | none                    | NavigationDrawerItem's icon from iconkind.             |
+| IconSource           | SkPicture |                         | NavigationDrawerItem's icon from file.                 |
+| IconData             | string    | empty                   | NavigationDrawerItem's icon from path data.            |
+| ActiveIndicatorColor |           | SecondaryContainerColor | NavigationDrawerItem's activeIndicator color.          |
+| BackgroundColour     | Color     | Transparent             | NavigationDrawerItem's background color.               |
+| ForegroundColor      | Color     | OnSurfaceVariantColor   | NavigationDrawerItem's foreground color.               |
+| FontFamily           | string    |                         | font family of the NavigationDrawerItem's text.        |
+| FontSize             | float     | 14                      | font size of the NavigationDrawerItem's text.          |
+| FontWeight           | int       | 500                     | font weight of the NavigationDrawerItem's text.        |
+| FontItalic           | bool      | false                   | enable font italic of the NavigationDrawerItem's text. |
+| RippleColor          | Color     | SurfaceTintColor        | NavigationDrawerItem's ripple color.                   |
 
 
 
diff --git a/docs/tabs.md b/docs/tabs.md
index 3c61a90..7540d84 100644
--- a/docs/tabs.md
+++ b/docs/tabs.md
@@ -68,8 +68,9 @@ There are 2 Styles of : 1. Filled, 2. Scrolled.
 | Content              | View      |         | TabItem's contain content.                |
 | IsActived            | bool      | false   | TabItem's selected state.                 |
 | Text                 | string    | empty   | TabItem's Text.                           |
-| Icon                 | IconKind  | none    | TabItem's icon.                           |
-| IconSource           | SkPicture |         | TabItem's icon.                           |
+| IconKind             | IconKind  | none    | TabItem's icon from iconkind.             |
+| IconSource           | SkPicture |         | TabItem's icon from file.                 |
+| IconData             | string    | empty   | TabItem's icon from path data.            |
 | ActiveIndicatorColor | Color     | style   | TabItem's activeIndicator color.          |
 | BackgroundColour     | Color     | style   | TabItem's background color.               |
 | ForegroundColor      | Color     | style   | TabItem's foreground color.               |
diff --git a/docs/text-field.md b/docs/text-field.md
index e6f50df..fa98467 100644
--- a/docs/text-field.md
+++ b/docs/text-field.md
@@ -33,10 +33,12 @@ There are 2 Styles of text fields: 1. Filled,  2. Outlined.
 | IsError               | bool      |                 | TextField's verified state.                   |
 | CaretPosition         | int       |                 | TextField's caret position.                   |
 | CaretColor            | Color     | style           | TextField's caret and cursor color.           |
-| Icon                  | IconKind  | none            | TextField's icon.                             |
-| IconSource            | SkPicture |                 | TextField's icon.                             |
-| TrailingIcon          | IconKind  | none            | TextField's trailing icon.                    |
-| TrailingIconSource    | SkPicture |                 | TextField's trailing icon.                    |
+| IconKind              | IconKind  | none            | TextField's icon from iconkind.               |
+| IconSource            | SkPicture |                 | TextField's icon from file.                   |
+| IconData              | string    | empty           | TextField's icon from path data.              |
+| TrailingIcon          | IconKind  | none            | TextField's trailing icon from iconkind.      |
+| TrailingIconSource    | SkPicture |                 | TextField's trailing icon from file.          |
+| TrailingIconData      | string    | empty           | TextField's trailing icon from path data.     |
 | LabelText             | string    | Label text      | TextField's label text.                       |
 | LabelTextColor        | Color     | style           | TextField's label text color.                 |
 | SupportingText        | string    | Supporting text | TextField's supporting text.                  |