By default my angular.json will include the whole ionicon set as follows:
"assets": [
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
Since Im using custom icons set, I have removed the above from my assets array but this also removed back icon from <ion-back-button>, any idea how can I import only the ionicicons I am using and avoid including the whole icon pack in my app?
if you want to add custom icons for you can do the following :
create file in themes and name it icons.scss for example
in that file put your icons like this : suppose your icon name will be "products" and the icon file name called " menu.svg "
ion-icon {
&[class*="products"] {
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
width: 1em; // for example
height: 1em;// for example
background: #yourColor ;
mask-image: url('../assets/menu.svg');
}
}
in app.scss add #import '../theme/icons';
and if you don't want to use default icons , remove #import "ionic.ionicons";
from variables.scss in themes
I'm trying to make the default Ionic Alerts larger. I'm developing an app that needs to have easy touch points and the default alerts are too small for what I'm needing.
I've tried enlarging the font as well as expanding the width of the alerts but nothing seems to actually make the alerts larger.
Any easy/best ways to do this?
AlertController supports custom classes which could be placed in your component's scss file and there you can do necessary alterations.
For example in your component's ts file you can have this method that creates alert with reference to custom class "scaledAlert":
delete() {
let confirm = this.alertCtrl.create({
title: "Are You Sure?",
cssClass: "scaledAlert",
message: "this will remove image from your image gallery",
buttons: [
{
text: "Cancel",
handler: () => {
console.log("Canceled delete");
}
},
{
text: "Confirm",
handler: () => {
console.log("deleting...");
this.deleteImageFromGallery(this.image)
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
this.viewCtrl.dismiss();
}
}
]
});
confirm.present();
}
Now in the scss file you add class to style as you need to scale the controller, such class goes after your page or component:
home-page {
.item {
min-height: 2rem; /* <- this can be whatever you need */
}
ion-label {
margin: 0px 0px 0px 0;
}
.item-content {
padding-top: 0px;
padding-bottom: 0px;
margin-top: -12px;
margin-bottom: -12px;
height: 50px;
}
}
.scaledAlert {
transform: scale(1.5);
}
Here I used just naive "scale" function which may require you to add some cross browser compatible versions of it. But you should achieve what you want with it (it worked in my app without issues).
Alternatively you can override default styles using saas variables: https://ionicframework.com/docs/api/components/alert/AlertController/#sass-variables
You will have to alter them in theme\variables.scss" which is located in your project's folder
See more here: https://ionicframework.com/docs/theming/overriding-ionic-variables/
And third option is indeed to check elements' style via devtool and attempt to override those classes. But I don't like that way, feels a bit more hacky.
Some of the styles for alert are not getting updated if written in component SCSS file. The styles need to be written in the global scss file.
I am using Ionic 2 for developing my App. I want to use my custom icons in my app like we use ionic 2 icons using tag. Eg:
<ion-icon name="my-custom-icon"></ion-icon>
How can i achieve this? Is there any recommended way to doing this?
This is the easiest way I've found, from the forums at https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/36.
In your app.scss file, add the following code:
ion-icon {
&[class*="appname-"] {
// Instead of using the font-based icons
// We're applying SVG masks
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 1em;
height: 1em;
}
// custom icons
&[class*="appname-customicon1"] {
mask-image: url(../assets/img/customicon1.svg);
}
&[class*="appname-customicon2"] {
mask-image: url(../assets/img/customicon2.svg);
}
&[class*="appname-customicon3"] {
mask-image: url(../assets/img/customicon3.svg);
}
}
Then in your templates, you can use the following HTML to create the icon:
<ion-icon name="appname-customicon"></ion-icon>
This is far less complicated than using the font-based methods. As long as you're not adding hundreds of icons you should be okay with this method. However each image is sent as a separate request, where as with the font methods all the images are contained in one file, so it would be a little more efficient.
If you want to use custom fonts in ionic 2+ you can do it with following.
Step 01:
Have/create custom font SVG files using tools such as XD.
Go to awesome online tool https://icomoon.io to generate font icons out of your SVG files. It's free tool and very good, I am using it for a while.
Download your custom font file.
Your file will look like something below.
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
replace above code with :
[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{
#extend .ion;
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
Step 02:
We can use SASS #mixing for repetitive work
#mixin makeIcon($arg, $val) {
.ion-ios-#{$arg}:before ,
.ion-ios-#{$arg}-circle:before ,
.ion-ios-#{$arg}-circle-outline:before ,
.ion-ios-#{$arg}-outline:before ,
.ion-md-#{$arg}:before ,
.ion-md-#{$arg}-circle:before ,
.ion-md-#{$arg}-circle-outline:before ,
.ion-md-#{$arg}-outline:before {
content: $val;
font-size: 26px;
}
}
we can use our sass mixing in our sass file like :
#include makeIcon(icon-new-home, '\e911')
Step 03
Use it like
<ion-tabs class="footer-tabs" [selectedIndex]="mySelectedIndex">
<ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabIcon="icon-new-home"></ion-tab>
</ion-tabs>
and its even support android ripple effect, which kinda looks cool
[Updated] 30 Nov 2017
#ionic/app-scripts : 3.1.2
Ionic Framework : ionic-angular 3.9.2
For Ionic 3.1.2
You need to add #import "ionicons"; inside your /src/theme/variables.scss file which will fix below error
"[class^="icon-"]" failed to #extend ".ion". The selector ".ion" was not found. Use "#extend .ion !optional"
if the extend should be able to fail.
With the current Ionic 3.3.0 you can use the solution from Anjum, but you have to change
#import "ionic.ionicons";
to
#import "ionicons";
in the src/theme/variables.scss file.
Found this solution at:
https://github.com/yannbf/ionicCustomIconsSample/blob/master/src/theme/variables.scss
Been trying to implement Anjum Nawab shaikh answer on top with the icons sass sheet from icomoon.
I have been able to get it working with version 2.2.2.
In the www/fonts of the project I had added the icomoon files:
icomoon.svg
icomoon.ttf
icomoon.woff
icomoon.eot
icomoon.scss
In icomoon.scss I added the following scss:
#font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?tclihz');
src: url('../fonts/icomoon.eot?tclihz#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?tclihz') format('truetype'),
url('../fonts/icomoon.woff?tclihz') format('woff'),
url('../fonts/icomoon.svg?tclihz#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{
/* Didn't feel the need to #extend since this just adds to already existing .ion
code which I believe is replaced to just ion-icon tag selector in
www/assets/fonts/ionicons.scss */
font-family: "Ionicons", "icomoon" !important; //So just add this
}
//Mixin
#mixin makeIcon($arg, $val) {
.ion-ios-#{$arg}:before ,
.ion-ios-#{$arg}-circle:before ,
.ion-ios-#{$arg}-circle-outline:before ,
.ion-ios-#{$arg}-outline:before ,
.ion-md-#{$arg}:before ,
.ion-md-#{$arg}-circle:before ,
.ion-md-#{$arg}-circle-outline:before ,
.ion-md-#{$arg}-outline:before {
//important to overwrite ionic icons with your own icons
content: $val !important;
font-size: 26px;
}
}
//Adding Icons
#include makeIcon(email, '\e900');
...
Then I did an import to the variables.scss
#import "../www/fonts/icomoon";
Now we can add this to the html template:
<ion-icon name="email"></ion-icon>
Before starting : make sure that you have every svg file you need.
Now just go here : http://fontello.com/
That tool will generate your icon font and the CSS needed with. It is pretty intuitive, just use it, download, and copy your font wherever you want in your www folder but keep the same file structure. To finish, just integrate your CSS file in your index.html file and you're done!
I hope it will solve your issue! ;-)
According to ionic team:
Hey there!
Right now it's limited to using ionicons, since underneath it's rendering an ion-icon, and thats handling the platform differences. You could open an issue and we could discuss adding this feature there
You can see all answers in here:
https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/16
I also find this:
https://www.npmjs.com/package/ionic2-custom-icons ,
but do not seems a clever solution (I prefer to wait for a solution of Ionic team).
The best scenario for this is use old way, by creating a class on a scss file.
For add custom icons I use in my scss file:
.ion-ios-MYICON:before,
.ion-ios-MYICON-circle:before,
.ion-ios-MYICON-circle-outline:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-circle:before,
.ion-md-MYICON-circle-outline:before,
.ion-md-MYICON-outline:before {
#extend .ion;
}
.ion-ios-MYICON:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-outline:before {
content: 'your-custom-image';
}
Then in your HTML code:
<ion-icon name="MYICON"></ion-icon>
I think this step-by-step by GerritErpenstein is very intuitive, it works pretty good for me. My Ionic version is 2.2.2. Literally, you use a sentence like this and it's done:
<custom-icon set="star" name="iconostar"></custom-icon>
https://github.com/GerritErpenstein/ionic2-custom-icons
Create Icon
ion-icon {
&[class*="custom-"] {
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 0.8em;
height: 0.8em;
}
&[class*="custom-rupee"] {
color: yellow;
mask-image: url(../../assets/Images/rupee.svg);
}
&[class*="custom-ballon"] {
mask-image: url(../../assets/ballon.svg);
}
&[class*="custom-mouse"] {
mask-image: url(../../assets/mouse.svg);
}
}
And to use them
<ion-icon name="custom-rupee"></ion-icon>
<ion-icon name="custom-mouse"></ion-icon>
<ion-icon name="custom-ballon"></ion-icon>
If ionic way is not working for you, you can work with the angular way. Use this package: https://www.npmjs.com/package/angular-svg-icon.
Sample Code for ionic usage:
<svg-icon src="/assets/icons/activity.svg"></svg-icon>
Following is the recommended way to display external svg icons using ion-icon:
To use a custom SVG, provide its url in the src attribute to request the external SVG file. The src attribute works the same as in that the url must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid svg and does not allow scripts or events within the svg element.
<ion-icon src="assets/icons/custom_icon.svg"></ion-icon>
Reference: https://ionic.io/ionicons/usage
I am trying to import bootstrap.css into a .less file, so that I can conditionally apply Bootstrap styles with media-queries.
Here is my LESS code:
// Visual Studio is saying "Couldn't locate" the file for both, yet they are there:
#import url("bootstrap.min.css");
#import url("bootstrap-theme.min.css");
// ...can't find the source of the "#screen" at-rules:
#extra-small: ~"screen and (max-width: #screen-xs-max)";
#small: ~"screen and (min-width: #screen-sm-min) and (max-width: #screen-sm-max)";
#medium: ~"screen and (min-width: #screen-md-min) and (max-width: #screen-md-max)";
#large: ~"screen and (min-width: #screen-lg-min)";
footer {
text-align: center;
// ...doesn't like the comma "or" syntax here, so "or" is used instead:
#media #extra-small or #small {
#linkedin-flair {
.hide // compile error
}
#stackoverflow-flair {
.hide // compile error
}
}
#media #medium {
#linkedin-flair {
.col-sm-3 // compile error
}
#copyright-text {
.col-sm-6 // compile error
}
#stackoverflow-flair {
.col-sm-3 // compile error
}
}
#media #large {
#linkedin-flair {
.col-sm-4 // compile error
}
#copyright-text {
.col-sm-4 // compile error
}
#stackoverflow-flair {
.col-sm-4 // compile error
}
}
}
...the LESS is having trouble with the #import and #screen at-rules, and with referencing any Bootstrap classes such as .hide.
I am using Visual Studio 2013, Web Essentials 2013, and Bootstrap 3.
1) You should prefer to download Bootstrap's LESS files and import them with #import "bootstrap.less". If you can't follow #seven-phases-max 's links and use #import (less) bootstrap.min.css
2) "// ...can't find the source of the "#screen" at-rules:" these rules are not defined in Bootstrap's LESS files. The code from the docs illustrate the boundaries of the grid defined by Bootstrap. It will show you what happens if you change the variables mentioned.
For example take a look to grid.less which defines:
#media (min-width: #screen-sm) {
width: #container-sm;
}
Also read: http://blog.scur.pl/2012/06/variable-media-queries-less-css/ and LESS variables in #media queries i don't think you solution won't work cause:
#screen-lg: 992px;
#large: ~"screen and (min-width: #screen-lg)";
#media #large{ color: red; }
compiles to:
#media screen and (min-width: #screen-lg) {
color: red;
}
NB #screen-lg not set.
3) " .hide // compile error" there is no mixins called hide
You could use mixins from responsive-utilities.less (see also: http://getbootstrap.com/css/#responsive-utilities)
In your case you will get something like:
//example DO NOT compile to useful CSS
#import (reference) "bootstrap.less";
#linkedin-flair
{
&:extend(.hidden-xs);
&:extend(.hidden-sm);
}
4) " .col-sm-4 // compile error" .col-sm-4 is dynamical generate (grid.less) you can't use it as a mixin.
use:
#stackoverflow-flair {
.make-sm-column(4);
}
i am currently working on a project which is taking an active check feed from Nagios Check_mk and displaying on a text widget. i am trying to get the widget to change colour, working through the workshop page i am stuck with the coffee script, it doesn't appear to have any effect when the value is changed. here is what i have
alert.coffee
class Dashing.Alert extends Dashing.Widget
ready: ->
# This is fired when the widget is done being rendered
onData: (data) ->
# Handle incoming data
# You can access the html node of this widget with #node
# Example: $(#node).fadeOut().fadeIn() will make the node flash each time data comes in.
#accessor 'value', Dashing.AnimatedValue
#accessor 'isTooHigh', ->
#get('value') > 200
alert scss
.widget-alert {
background: #00ff99;
font-size: 65px;
font-weight: bold;
}
.danger {
background: #ff1a00;
}
all other files are exactly as detailed in the workshop page: any help greatly appreciated.
Basically the change of color or animated flashing of color was handled by the scss #keyframe rule, you must bind it to a selector, otherwise the animation will have no effect
Here's some example
$background-alert-color-1: #FFFF66;
$background-alert-color-2: #FF9618;
$text-alert-color: #fff;
#-webkit-keyframes status-alert-background {
0% { background-color: $background-alert-color-1; }
50% { background-color: $background-alert-color-2; }
100% { background-color: $background-alert-color-1; }
}
.widget.status-alert {
color: $text-alert-color;
background-color: $background-alert-color-1;
#include animation(status-alert-background, 2s, ease, infinite);
.icon-alert-sign {
display: inline-block;
}
.title, .more-info {
color: $text-alert-color;
}
For some example and reference (also for the coffescript) you can check this one dashing_zabbix