Ionicons 5 breaking changes

[jongbonga]

Ionic version: (check one with "x")
[ ] 2.x
[ ] 3.x
[ ] 4.x
[x] 5.x

Ion2-calendar mode: (check one with "x")
[ ] components mode
[ ] modal mode

I'm submitting a ... (check one with "x")
[ ] bug report
[x] feature request
[ ] help me

Current behavior:

Ionicons 5 comes with renamed icons that causes buttons to disappear on calendar

Expected behavior:

Show all the icons/button

Steps to reproduce:

update to latest ionic 5

Related code:

insert short code snippets here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic:

   Ionic CLI                     : 6.0.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.0-rc.3
   @angular-devkit/build-angular : 0.900.1
   @angular-devkit/schematics    : 9.0.1
   @angular/cli                  : 9.0.1
   @ionic/angular-toolkit        : 2.1.2

[TdoubleG]

+1

[shaneparsons]

@jongbonga @TdoubleG Until ionicon 5 support is merged into this repo, feel free to point towards the latest commit in my fork:

"ion2-calendar": "https://github.com/shaneparsons/ion2-calendar#76ae1e241183500a377647b363c931a03aa50bca",

[javieraviles]

Thanks @shaneparsons

Why is not being merged to main project yet? is the owner lacking time for this or?

[aastudillo91]

@jongbonga @TdoubleG Until ionicon 5 support is merged into this repo, feel free to point towards the latest commit in my fork:

"ion2-calendar": "https://github.com/shaneparsons/ion2-calendar#76ae1e241183500a377647b363c931a03aa50bca",

shane install your fork repository but still can't load the icons, this is my log:

[WDS] Live Reloading enabled.
svg/md-arrow-dropdown.svg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
svg/ios-arrow-back.svg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
svg/ios-arrow-forward.svg:1 Failed to load resource: the server responded with a status of 404 (Not Found)

this is my ionic info log:
Ionic:

Ionic CLI : 6.10.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.1.1
@angular-devkit/build-angular : 0.901.7
@angular-devkit/schematics : 9.1.7
@angular/cli : 9.1.7
@ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 2.1.2
@capacitor/core : 2.1.2

Utility:

cordova-res (update available: 0.15.1) : 0.13.0
native-run : 1.0.0

System:

NodeJS : v12.16.2 (/usr/local/bin/node)
npm : 6.14.5
OS : macOS Catalina

does the same error happen to someone else?
or
can you help me solve this problem?

thanks!!

[shaneparsons]

@aastudillo91 I'm not sure how you're using the component in order to get those errors, but here's an example of how I'm using it, without issues:

<template>
    <full-calendar :config="config" :events="events" />
</template>

<script>
export default {
  data() {
    return {
      config: {
        defaultView: 'month',
        themeSystem: 'bootstrap4',
        header: {
          left: 'title',
          center: '',
          right: 'prev,today,next',
        },
        buttonText: {
          prev: '<',
          today: 'Today',
          next: '>',
        },
        bootstrapFontAwesome: false,
        eventClick: item => {
          console.log(item.id);
        },
      },
      events: [
        {
          title: 'event1',
          start: '2019-01-01',
        },
        {
          title: 'event2',
          start: '2019-01-02',
        },
        {
          title: 'event3',
          start: '2019-01-03',
        },
      ],
    };
  },
};
</script>

[comadaihiep92]

Please help, icon don't show on @ionic/angular 5.2.3.

how to fixed it?

http://localhost:8100/svg/md-arrow-dropdown.svg 404 (Not Found) http://localhost:8100/svg/ios-arrow-back.svg 404 (Not Found) http://localhost:8100/svg/ios-arrow-forward.svg 404 (Not Found)

`Ionic info:

Ionic CLI : 6.10.1 (C:\Users\lanth.UNITEK\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.2.3
@angular-devkit/build-angular : 0.901.10
@angular-devkit/schematics : 9.1.10
@angular/cli : 9.1.10
@ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 2.2.1
@capacitor/core : 2.2.1

Utility:

cordova-res : 0.15.1
native-run : 1.0.0

System:

NodeJS : v12.16.2 (C:\Program Files\nodejs\node.exe)
npm : 6.14.4
OS : Windows 10`

[jongbonga]

@comadaihiep92
npm i “https://github.com/shaneparsons/ion2-calendar#76ae1e241183500a377647b363c931a03aa50bca"

[jongbonga]

@myvictorlife this issue is related to icons not displaying... yours is something else. create a seperate issue for it

[myvictorlife]

@myvictorlife this issue is related to icons not displaying... yours is something else. create a seperate issue for it

Thanks @jongbonga, I removed the comment here and created an issue. #307

[SagarJHedau]

Thanks @shaneparsons

[LamJingJie]

Doesn't work for me. I tried to change my package-json-lock and package-json "ion2-calendar" to "https://github.com/shaneparsons/ion2-calendar#76ae1e241183500a377647b363c931a03aa50bca" stated above but to no avail.

I then tried to npm i "https://github.com/shaneparsons/ion2-calendar#76ae1e241183500a377647b363c931a03aa50bca" also did not work as it gives me this error:

npm ERR! code 1
npm ERR! git dep preparation failed
npm ERR! command C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js install --cache=C:\Users\jingj\AppData\Local\npm-cache_cacache --prefer-offline=false --prefer-online=false --offline=false --no-progress --no-save --no-audit
npm ERR! npm ERR! code ERESOLVE
npm ERR! npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! npm ERR!
npm ERR! npm ERR! While resolving: [email protected]
npm ERR! npm ERR! Found: @angular/[email protected]
npm ERR! npm ERR! node_modules/@angular/compiler
npm ERR! npm ERR! dev @angular/compiler@"7.1.4" from the root project
npm ERR! npm ERR!
npm ERR! npm ERR! Could not resolve dependency:
npm ERR! npm ERR! peer @angular/compiler@"7.2.16" from @angular/[email protected]
npm ERR! npm ERR! node_modules/@angular/compiler-cli
npm ERR! npm ERR! dev @angular/compiler-cli@"^7.2.9" from the root project
npm ERR! npm ERR!
npm ERR! npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! npm ERR!
npm ERR! npm ERR! See C:\Users\jingj\AppData\Local\npm-cache_cacache\eresolve-report.txt for a full report.
npm ERR!
npm ERR! npm ERR! A complete log of this run can be found in:
npm ERR! npm ERR! C:\Users\jingj\AppData\Local\npm-cache_cacache_logs\2021-01-14T05_17_36_783Z-debug.log

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\jingj\AppData\Local\npm-cache_logs\2021-01-14T05_17_37_050Z-debug.log

Does anyone knows how to fix? Will be greatly appreciated :). Thanks

[mhmoudalaskalany]

may be it is too late answer but i face same issue today and i solved it by install latest stable version of the npm package don't install
npm i ion2-calendar@next

just install
npm i ion2-calendar
the icons should works fine