refactor(ionicons): update to ionicons v5 (#19670)

* refactor(ionicons): update to ionicons v5

* refactor(back-button): update back button icon to v5 ionicons

* refactor(item): update default detail icon to chevron-forward

* refactor(reorder): update reorder icon for ionicons v5

* refactor(searchbar): use search-sharp

* refactor(searchIcon): update v5 ionicon

* refactor(clearIcon): update searchbar clear icon

* refactor(cancelButton): update to arrow-back-sharp

* refactor(menuIcon): update to v5 ionicons

* api readme updates

* update react and vue ionicons

* add ionicons to react deps

* add ionicons to ionic/vue deps

* add icon to react test

* updates

* fix back button regression for no icon

* update tests

* fix more tests

* fix more icons

* update ionicons version

* fix circle icons

* add correct ellipsis

core/src/components/back-button/back-button.tsx

@@ -19,7 +19,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
 })
 export class BackButton implements ComponentInterface, ButtonInterface {
 
-  private mode = getIonMode(this);
+  mode = getIonMode(this);
   @Element() el!: HTMLElement;
 
   /**
@@ -54,20 +54,32 @@ export class BackButton implements ComponentInterface, ButtonInterface {
    */
   @Prop() type: 'submit' | 'reset' | 'button' = 'button';
 
-  private get backButtonIcon() {
-    return this.icon != null ? this.icon : config.get('backButtonIcon', 'arrow-back');
+  get backButtonIcon() {
+    const icon = this.icon;
+    if (icon != null) {
+      // icon is set on the component or by the config
+      return icon;
+    }
+
+    if (this.mode === 'ios') {
+      // default ios back button icon
+      return config.get('backButtonIcon', 'chevron-back');
+    }
+
+    // default md back button icon
+    return config.get('backButtonIcon', 'arrow-back-sharp');
   }
 
-  private get backButtonText() {
+  get backButtonText() {
     const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
     return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
   }
 
-  private get hasIconOnly() {
+  get hasIconOnly() {
     return this.backButtonIcon && !this.backButtonText;
   }
 
-  private get rippleType() {
+  get rippleType() {
     // If the button only has an icon we use the unbounded
     // "circular" ripple effect
     if (this.hasIconOnly) {

core/src/components/back-button/test/back-button.spec.ts

@@ -0,0 +1,59 @@
+import { BackButton } from "../back-button";
+import { config } from "../../../global/config";
+
+
+describe('back button', () => {
+  let bb: BackButton;
+
+  beforeEach(() => {
+    config.reset({});
+    bb = new BackButton();
+  });
+
+  describe('backButtonIcon', () => {
+
+    it('set custom icon on the instance, override config', () => {
+      bb.icon = 'custom-icon-instance';
+      config.reset({
+        backButtonIcon: 'custom-icon-config'
+      });
+      expect(bb.backButtonIcon).toBe('custom-icon-instance');
+    });
+
+    it('set custom icon in the config', () => {
+      config.reset({
+        backButtonIcon: 'custom-icon-config'
+      });
+      expect(bb.backButtonIcon).toBe('custom-icon-config');
+    });
+
+    it('set custom icon on the instance', () => {
+      bb.icon = 'custom-icon-instance';
+      expect(bb.backButtonIcon).toBe('custom-icon-instance');
+    });
+
+    it('default icon for ios mode', () => {
+      bb.mode = 'ios';
+      expect(bb.backButtonIcon).toBe('chevron-back');
+    });
+
+    it('default icon', () => {
+      expect(bb.backButtonIcon).toBe('arrow-back-sharp');
+    });
+
+  });
+
+  describe('backButtonText', () => {
+
+    it('default text for ios mode', () => {
+      bb.mode = 'ios';
+      expect(bb.backButtonText).toBe('Back');
+    });
+
+    it('default text', () => {
+      expect(bb.backButtonText).toBe(null);
+    });
+
+  });
+
+});