Searchbar icon (and others) not working

Hi, since I added my own icons font (I didn’t remove anything from Ionic). Ionic icons are not showing properly. I am getting this now in the searchbar’s back icon which I need to correct an also to change its color once it’s fixed if someone knows how:


What changes did you make?? And code please.

Icon is not loaded. share your code

The only code I can share is my variables.scss since I just changed that when I started my project to add more icons. The rest is just a normal searchbar

// Ionic Variables and Theming. For more info, please see:
$font-path: "../assets/fonts";

$font-family-md-base: "Montserrat";
$font-family-ios-base: "Montserrat";
$font-family-wp-base: "Montserrat";

@import "ionic.globals";

// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:

$text-color:        #000;
$background-color:  #fff;

// $ion-navbar-ios-height: '200px';
// $ion-navbar-md-height: '200px';
// $ion-navbar-wp-height: '200px';

$toolbar-ios-height: 70px;
$toolbar-md-height: 70px;
$toolbar-wp-height: 70px;

// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.

$colors: (
  primary:    #0079c8,
  primary75:  #409bd6,
  primary50:  #7fbce3,
  primary25:  #bfddf1,
  secondary:  #00335b,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #000,
  blanco:     #fff,
  gris:       #6c6e71,
  gris75:     #919295,
  gris50:     #b5b6b8,
  gris25:     #dadbdb,

// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
$searchbar-ios-background-color: white;
$searchbar-ios-input-search-icon-color: map-get($colors, primary);
$searchbar-ios-input-search-icon-size: 20px;
$searchbar-ios-input-height: 4rem;

// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
$searchbar-md-background-color: white;
$searchbar-md-input-search-icon-color: map-get($colors, primary);
$searchbar-md-input-search-icon-size: 30px;
$searchbar-md-input-height: 5rem;

// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here

// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.

@import "ionic.theme.default";

// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
//$ionicons-font-path: "../assets/fonts";
@import "ionic.ionicons";
@import "bupaicons";

// Fonts
// --------------------------------------------------

@import "roboto";
@import "noto-sans";

This doesn’t helps as no backbutton related values are there.

It is a fresh project, there is nothing, just my added variables and a normal searchbar. I can’t give you anything else

In that case just try inspect element in chrome, you may find a way out.

this class is what seems to be broken, the one related to the icon:


Can you screenshot it and post the class and its properties.

this is the only thing i can get from the inspector which adds nothing:

.ion-md-arrow-back:before {
    content: "\f27d";

ok it seems this is what’s causing trouble, what can I do? it’s something my company makes us put. This is a global css, the font-family is what’s messing thigs up:

i, .icon { /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "bupaicons" !important;
  speak: none;
  font-style: normal !important;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  vertical-align: middle;
  line-height: 1.1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

Ok problem is the project had : @import "ionic.ionicons"; instead of @import "ionicons"; in variables.scss

That’s great you solved it.