图标渐变无法在iOS上运行

Question

我在我的应用中使用ionicons，并且我想用CSS渐变来设置它们。我发现的代码在浏览器上运行良好，但它没有在模拟器/设备中显示任何内容，只是一个空白区域。这就是我在浏览器中的含义：

我的HTML：

        <div class="spacer" style="width: 300px; height: 20px;"></div>
        <p style="font-size: 11px; margin-left: 10px; color: #a9a9a9;">PESSOAL</p>
        <ion-item class="item-icon-left" id="perfil-list-item21">
            <i class="icon ion-bag gradient-icon" style="font-size: 25px;"></i><p style="font-size: 15px; display:inline;">Aniversário</p>
            <span id="userbirth" class="item-note"></span>
        </ion-item>

CSS：

.gradient-icon {
  background-image: -webkit-gradient(linear, left top, left bottom,  from(#00e6e6), to(#0047b3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: initial;}

欢迎任何帮助。