I'm using Ionic2: I have my Icons and I want to set them as we set Ionic icons:
<ion-icon name="cart"></ion-icon>
what should I do to use my icons, I don't want to use online Icons I want to use my icons
Related
I have an Ionic + Electron desktop application and upon current item selection from the menu I wish to change the icon src of the selected item. Currently I am able to change the color of the item text alone using the 'routerLinkActive' attribute. How can I also change the src of the ion-icon upon link active?
<ion-item lines="none" routerLinkActive="activeHighlight" routerLink="/dashboard" mode="md" class="menuItems">
<ion-icon src="assets/icon/Dashboard.svg" slot="start"></ion-icon>
<ion-label>Dashboard</ion-label>
</ion-item>
This is how I am changing the styling of ion-label when link is active, I also wish to change the icon to the same color. For that I am trying to add another svg of the same icon to the src only when that link is active.
Hopefully, I understood your question right.
If you want to make your icon src dynamic you can just use a variable instead of hard coding it.
Example:
<ion-img class="headerLogo" [src]="imageSource"></ion-img>
Ts file:
imageSource = "assets/icon/Dashboard.svg"
I added ion-refresher in a Ionic 4 project like this :
<ion-refresher slot="fixed">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
But for Android platform the default spinner showing up is lines not crescent.
you can specify the spinner shape you want just follow this link
I want to use scrollToTop in my ionic project . In my code scrollToTop working but i am want to show button when scroll the content in ionic . How to show sticky button in ionic please help me...
In images my button show at end want to show at middle and show when i am scrolling..
tab1.page.html
<ion-content cache-view="false" (ionScrollStart)="logScrollStart()" (ionScroll)="logScrolling($event)"
(ionScrollEnd)="logScrollEnd()" [scrollEvents]="true">
<button class="scroll" (click)="ScrollToTop()">
<ion-icon name="arrow-dropup-circle"></ion-icon>
</button>
</ion-content>
tab1.page.ts
ScrollToTop(){
this.content.scrollToTop(1500);
}
For the "when I'm scrolling", you can detect if your heart icon is visible in your scroll-able card with something like:
How to Check if element is visible after scrolling?
i am trying to display video as the splash screen using this Tutorial. I am able to do css and add images but i can not use video as the splash screen.
MY code in index.html
<!-- Ionic's root component and where the app will load -->
<ion-app>
<!-- custom splash screen (non-angular component) -->
<div id="splash-screen" class="splash">
<video autoplay muted loop webkit-playsinline playsinline src="assets/splash/Splash_Reduced.mp4"></video>
</div>
</ion-app>
The splash screen is present but the video is broken or not available.
It looks like IONIC does not let us remove the default splash screen. The white blank screen will display for a while in android and the default splash screen is required for IOS.
SO, THE ONLY OPTION I FOUND IS USING TWO SPLASH SCREENS.
The default static splash screen and then the animated splash screen for the same logo. :)
I know it is not good practice. But after long searching and trying, I got to this solution.
I'm using the Ionic framework and I just got the template project side-menu from them. I was wondering if it's possible to put the ion-header-bar appear above the ion-side-menu.
This is how it is right now:
This is how I want it to be:
Any ideas?
You could use an alternative drawer component for your side menu, for example:
https://github.com/beaver71/ionic-ion-drawer
Basic usage is:
<drawer side="left">
<ion-content>
....
</ion-content>
</drawer>
Here is a working example: http://codepen.io/beaver71/pen/BKpRjM/