Shared module ion-icon won't show correctly

Ionic Framework ionic-v3
1

hi guy,

i have a shared module and in his template a ion-icon for my button but this icon won’t show [edit]when i import my module in other component[/edit].

<ion-icon class="arrow-forward" name="arrow-forward"></ion-icon>

import { NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import { IonicPageModule, IonicModule } from 'ionic-angular';
import { MySocialBarComponent } from './my-social-bar';

@NgModule({
  declarations: [ MySocialBarComponent ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  imports: [ IonicPageModule.forChild(MySocialBarComponent) ],
  exports: [ MySocialBarComponent ]
})
export class MySocialBarModule {}

his template

<ion-fab left bottom >
    <button ion-fab mini color="black" class="fabbt"><ion-icon class="arrow-forward" name="arrow-forward"></ion-icon></button>
	 		<ion-fab-list side="right" class="fablist">
		      <button ion-fab name="ion-fab_fb" class="fb" (click)="goFb()"></button>
		      <button ion-fab name="ion-fab_twitter" class="twitter" (click)="goTwitter()"></button>
		      <button ion-fab name="ion-fab_snap" class="snap" (click)="goSnap()" ></button>
		      <button ion-fab name="ion-fab_insta" class="insta"(click)="goInsta()"></button>
		      <button ion-fab name="ion-fab_siteweb" class="siteweb" (click)="goWeb()"></button>
	    	</ion-fab-list>
</ion-fab>

result not clicked :
icon not cliked
result clicked :
icon cliked
good result when i include my component directly (not shared module) in other page
icon nice

Tell me what can be wrong please :disappointed_relieved:

2

Where are you using the ion-icon? I don’t see it in his template

3

try to search “icon” in this post, u will see.

4

Ah, I see, my bad.

What does your arrow-forward class do?

5

it’s just a test class to check if a css background image worked in my module.
but i have tried to remove all my css class and not solve my problem.

[EDIT] To resume, if i import my module and put just <my-component></my-component> in template where i use this module, it’s already the same problem (result clicked).

6

Import IonicModule in your component’s module.

7

I have imported IonicModule but any effect

import { NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import { IonicPageModule, IonicModule } from 'ionic-angular';
import { MySocialBarComponent } from './my-social-bar';

@NgModule({
  declarations: [ MySocialBarComponent ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  imports: [ IonicModule, IonicPageModule.forChild(MySocialBarComponent) ],
  exports: [ MySocialBarComponent ]
})
export class MySocialBarModule {}

Another point that i have not noticed :

In component where i use this module, when button have been opened by click, it moves a bit to the bottom and pass to clicked state.

onlym

onlym_clicked

8

if i remove mini of this ion-fab tag, an arrow is showing :

<button ion-fab color="black">

wmini

but in clicked state :
wmini-c

9

i found the problem and i’m so sorry :grimacing: for SigmundFroyd that pointed in good direction.

CSS was the problem due to this selector [class*='close-'] {}

Just don’t use name :

close-

and that works well