Icon display with different color on Iphone and on other devices

user_18119832 0
Viewed 298

i have a problem with some icon color displaying on Iphone. Here the html code :

<button type="submit" aria-label="Start Searching">
   <i className={`icon-search`} aria-hidden="true" />
</button>

Here the svg of the icon :

<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<title>Search</title>
<g id="icomoon-ignore">
</g>
<path fill="#666" d="M637.117 637.117c81.229-81.229 81.229-212.928 0-294.157s-212.928-81.228-294.157 0c-81.228 81.229-81.228 212.928 0 294.157s212.928 81.229 294.157 0zM653.322 687.229c-100.573 83.475-250.045 78.086-344.302-16.17-99.974-99.974-99.974-262.067 0-362.040 99.975-99.974 262.065-99.974 362.039 0 94.256 94.258 99.648 243.73 16.17 344.302 0.272 0.25 0.538 0.502 0.8 0.765l90.509 90.512c9.373 9.373 9.373 24.566 0 33.939s-24.566 9.373-33.939 0l-90.512-90.509c-0.262-0.262-0.515-0.531-0.765-0.8z"></path>
</svg>

The icon color is correctly displayed ( that to say dark gray ) on Android or any desktop ( including Safari ) but he is fully white on Iphone ( Iphone 8, IOS 15.1 )

Does any one have a solution ?

svg css html
2 Answers
user_175111420

As @A Haworth pointed out: it might be ralated to some css rule in your global css.

Browser specific default styles

Since your icon already contains a hard coded fill attribute, my suspicion is your icon is colored white due to a safari default button style.
You could try to disable default button styling by applying an appearance: none rule.

button {
  font-size: 2em;
  display: block;
  width: 100%;
}

button svg {
  display: inline-block;
  height: 1em;
}

.btn-default {
  appearance: none;
  background: #fff;
  border: 1px solid #000;
}

.btn-default-use {
  color: #666;
}

button svg {
  display: inline-block;
  width: 1em;
}

.svgAssetHiddden {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
<p>button</p>
<button type="submit" aria-label="Start Searching">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
    <title>Search</title>
    <path fill="#666" d="M637.117 637.117c81.229-81.229 81.229-212.928 0-294.157s-212.928-81.228-294.157 0c-81.228 81.229-81.228 212.928 0 294.157s212.928 81.229 294.157 0zM653.322 687.229c-100.573 83.475-250.045 78.086-344.302-16.17-99.974-99.974-99.974-262.067 0-362.040 99.975-99.974 262.065-99.974 362.039 0 94.256 94.258 99.648 243.73 16.17 344.302 0.272 0.25 0.538 0.502 0.8 0.765l90.509 90.512c9.373 9.373 9.373 24.566 0 33.939s-24.566 9.373-33.939 0l-90.512-90.509c-0.262-0.262-0.515-0.531-0.765-0.8z"></path>
  </svg>
</button>

<p>button appearance none</p>
<button class="btn-default" type="submit" aria-label="Start Searching">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
    <title>Search</title>
    <path fill="#666" d="M637.117 637.117c81.229-81.229 81.229-212.928 0-294.157s-212.928-81.228-294.157 0c-81.228 81.229-81.228 212.928 0 294.157s212.928 81.229 294.157 0zM653.322 687.229c-100.573 83.475-250.045 78.086-344.302-16.17-99.974-99.974-99.974-262.067 0-362.040 99.975-99.974 262.065-99.974 362.039 0 94.256 94.258 99.648 243.73 16.17 344.302 0.272 0.25 0.538 0.502 0.8 0.765l90.509 90.512c9.373 9.373 9.373 24.566 0 33.939s-24.566 9.373-33.939 0l-90.512-90.509c-0.262-0.262-0.515-0.531-0.765-0.8z"></path>
  </svg>
</button>

<p>button use</p>
<button class="btn-default btn-default-use" type="submit" aria-label="Start Searching">
  <svg viewBox="0 0 1024 1024">
    <use href="#searchIcon" />
  </svg>
</button>

<svg class="svgAssetHiddden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-hidden="true">
  <symbol id="searchIcon" fill="currentColor">
    <path d="M637.117 637.117c81.229-81.229 81.229-212.928 0-294.157s-212.928-81.228-294.157 0c-81.228 81.229-81.228 212.928 0 294.157s212.928 81.229 294.157 0zM653.322 687.229c-100.573 83.475-250.045 78.086-344.302-16.17-99.974-99.974-99.974-262.067 0-362.040 99.975-99.974 262.065-99.974 362.039 0 94.256 94.258 99.648 243.73 16.17 344.302 0.272 0.25 0.538 0.502 0.8 0.765l90.509 90.512c9.373 9.373 9.373 24.566 0 33.939s-24.566 9.373-33.939 0l-90.512-90.509c-0.262-0.262-0.515-0.531-0.765-0.8z" />
  </symbol>
</svg>

Eventually, it might also be related to a Dark mode setting overriding your original fill to ensure a sufficient contrast.

user_150156750
Related