CODEWITHSUNDEEP
csssassiconsionic3
Sampath
Sampath

Reputation: 65870

Customize Ionic Icons - ionicons

I have a requirement to create an icon as shown below.

enter image description here

I have tried as shown below.

.html

<ion-content padding>
   <div style="background:lightblue;width: 50px;height: 50px;border-radius: 50%;">
    <ion-icon name="heart"></ion-icon>
  </div>
</ion-content>

Plunker is here

Q1: Is this the correct approach to create this kind of icon appearance?

Q2: How can I make it same as above image?

Q3: After that, I need to use that icon any place on any component.If I use margins to center the heart icon, hope it'll not work on any place no? In other words, I need to use it as a single unit.

Hope you'll give a feedback for this.

Upvotes: 0

Views: 6016

Answers (2)

TheRanaEhtisham
TheRanaEhtisham

Reputation: 117

scss

  .heart-icon {
    background: lightblue;
    border-radius: 50%;    
    color: #FFF;
  }

and for HTML

<ion-icon class="heart-icon" name="heart" item-start></ion-icon>

Upvotes: 0

Duannx
Duannx

Reputation: 8726

.heart-icon {
  background: lightblue;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  color: #FFF;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="heart-icon">
  <i class="fa fa-heart" aria-hidden="true"></i>
</div>

Hope it is what you want to achieve. You can use ionic icon instead of font awesome.

Upvotes: 1

Related Questions