zamarrowski/react-ionicons

Applying custom CSS styles to icons don't work

anesask opened this issue · 4 comments

anesask commented

Tried to add some custom styles as margin, padding...but I didn't manage to work...
Is it any solution to this or similar problem?

zamarrowski commented

Hi @anesask, can you paste the code to help you?
To apply custom styles just try this:

<Ionicon style={{marginLeft: '10px'}} icon="md-home"/>
anesask commented

@zamarrowski Inline CSS styles works perfectly, but as a class I can't change font-size or color?

<Ionicon class="someStyles" icon="md-home"/>

someStyles{ font-size: 14px; color: #d4d4d4; }

zamarrowski commented

@anesask Yes, you can. But the correct property is fill because is a svg icon. Example:

.example {
  fill: red;
  height: 70px;
}

 <Ionicon className="example" icon="md-add" style={{marginRight: '8px'}} />
  • 👍1
  • ❤️1
anesask commented

@anesask Yes, you can. But the correct property is fill because is a svg icon. Example:

.example {
  fill: red;
  height: 70px;
}

 <Ionicon className="example" icon="md-add" style={{marginRight: '8px'}} />

Thanks a lot! Made my day easier :)

  • 😄1