自定义离子图标 - 离子

Question

我需要创建一个图标，如下所示。

我尝试过如下所示。

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：这是创建这种图标外观的正确方法吗？

Q2：如何使其与上图相同？

问题3：之后，我需要在任何组件的任何位置使用该图标。如果我使用margins将heart图标居中，希望它不会在任何地方都不起作用吗？换句话说，我需要将它作为一个单元使用。

希望你能为此提供反馈。

Answer 1

scss

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

和HTML

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