MM-29869 Replace radio button Material with Compass icons (#4928) (#4932)

(cherry picked from commit 9940aacad1)

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>

app/components/radio_button/radio_button.js

@@ -5,10 +5,10 @@ import {connect} from 'react-redux';
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {Animated, Text, View} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
 
+import CompassIcon from '@components/compass_icon';
 import {getTheme} from '@mm-redux/selectors/entities/preferences';
-import {makeStyleSheetFromTheme} from 'app/utils/theme';
+import {makeStyleSheetFromTheme} from '@utils/theme';
 
 const DISABLED_OPACITY = 0.26;
 const DEFAULT_OPACITY = 1;
@@ -106,8 +106,8 @@ class RadioButton extends PureComponent {
                         },
                     ]}
                 />
-                <Icon
-                    name={checked ? 'radio-button-checked' : 'radio-button-unchecked'}
+                <CompassIcon
+                    name={checked ? 'radiobox-marked' : 'radiobox-blank'}
                     size={24}
                     color={color}
                     style={{

assets/base/compass-icons.json

@@ -1,6 +1,6 @@
 {
   "name": "compass-icons",
-  "css_prefix_text": "",
+  "css_prefix_text": "icon-",
   "css_use_suffix": false,
   "hinting": true,
   "units_per_em": 1000,
@@ -2833,6 +2833,48 @@
       "search": [
         "image-broken-outline"
       ]
+    },
+    {
+      "uid": "fa00bedd769856d21de9c9cecfacb8f1",
+      "css": "format-header",
+      "code": 59421,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M291.7 166.7H375V416.7H625V166.7H708.3V750H625V500H375V750H291.7V166.7",
+        "width": 1000
+      },
+      "search": [
+        "format-header"
+      ]
+    },
+    {
+      "uid": "68748157a35491e06ccd1482c8393ff3",
+      "css": "radiobox-marked",
+      "code": 984126,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M500 833.3A333.3 333.3 0 0 1 166.7 500 333.3 333.3 0 0 1 500 166.7 333.3 333.3 0 0 1 833.3 500 333.3 333.3 0 0 1 500 833.3M500 83.3A416.7 416.7 0 0 0 83.3 500 416.7 416.7 0 0 0 500 916.7 416.7 416.7 0 0 0 916.7 500 416.7 416.7 0 0 0 500 83.3M500 291.7A208.3 208.3 0 0 0 291.7 500 208.3 208.3 0 0 0 500 708.3 208.3 208.3 0 0 0 708.3 500 208.3 208.3 0 0 0 500 291.7Z",
+        "width": 1000
+      },
+      "search": [
+        "radiobox-marked"
+      ]
+    },
+    {
+      "uid": "3594dc48b84eebb8b600ea70e342c459",
+      "css": "radiobox-blank",
+      "code": 984125,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M500 833.3A333.3 333.3 0 0 1 166.7 500 333.3 333.3 0 0 1 500 166.7 333.3 333.3 0 0 1 833.3 500 333.3 333.3 0 0 1 500 833.3M500 83.3A416.7 416.7 0 0 0 83.3 500 416.7 416.7 0 0 0 500 916.7 416.7 416.7 0 0 0 916.7 500 416.7 416.7 0 0 0 500 83.3Z",
+        "width": 1000
+      },
+      "search": [
+        "radiobox-blank"
+      ]
     }
   ]
-}
+}