Sass 爱奥尼亚项目-自定义图标和文本之间的填充？

我正在设计一份配菜。我想减少

离子图标

和

标题

之间的填充，这两个图标位于

离子项目

内。我试图覆盖

ion项

sass属性，但没有帮助

<button menuClose ion-item *ngIf="!option.subItems" class="menu-style"
              (click)="openPage(option)">
          <ion-icon [name]="option.iconName" item-left color="primary"></ion-icon>
          {{ option.displayName }}
</button>

{{option.displayName}}

使用web浏览器中的功能检查组件的

sass

属性，这样您就可以毫不费力地找到它。您可以通过以下方式覆盖

ion项

样式

.item ion-icon[item-left]+.item-inner,
.item ion-icon[item-left]+.item-input {
    margin-left: 10px !important;
}

---

今天才碰到这个。问题是，除非图标位于

div

中，否则无法真正更改样式。但是，这意味着您必须使用

display:inline

显示

div

，这使得

margin

和

width

等内容不可用。而且，

padding

似乎没有任何作用

我能够通过一个附加的包装器/parent

div

和

相对定位来解决这个问题，使内部图标parent
div
显示为
绝对定位，这非常好，因为您可以绝对定位图标，但相对于内联父图标：

Search 
<div style="position:relative;display:inline">
  <!-- transparent placeholder for width -->
  <ion-icon name="search" style="color:transparent"></ion-icon>

  <!-- positioned/displayed icon -->
  <div style="position:absolute;left:0px;top:3px">
    <ion-icon name="search" color="primary"></ion-icon>
  </div>
</div>

搜索

该代码使
Search
文本后面的
div
直接显示在右侧，或与其他文本一起显示。然后，您可以看到
div style=“position:absolute；left:0px；top:3px”
用于绝对定位图标

我添加透明图标的原因是，再次使用
display:inline
意味着您无法指定宽度，因此提供相同内容的透明版本可以保证相同的宽度。基本上，您正在隐藏位置不正确的图标-仅将其用作宽度占位符-并显示位置正确的图标