3

I have used svg icons as custom ionic items as follows in my solution. It works fine with web view But not working well on simulators or devices as follows.

enter image description here

Left side is the simulator and right side is the web view

My Implementation

angular.json

....
        "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              },
              {
                "glob": "**/*.svg",
                "input": "src/assets/icon/ion-icons",
                "output": "./svg"
              }
            ],
....

HTML

<ion-icon name="decrease"></ion-icon>

Svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="7" height="4" viewBox="0 0 7 4">
  <defs>
    <clipPath id="clip-path">
      <path id="Shape" d="M2.793,3.5.146,6.146a.5.5,0,0,0,.707.707l3-3a.5.5,0,0,0,0-.707l-3-3A.5.5,0,0,0,.146.854Z"/>
    </clipPath>
  </defs>
  <g id="Group_34" data-name="Group 34" transform="translate(7) rotate(90)" clip-path="url(#clip-path)">
    <g id="COLOR_black" data-name="COLOR/ black" transform="translate(-4 -2.5)">
      <rect id="COLOR_black_background" data-name="COLOR/ black background" width="12" height="12" fill="rgba(0,0,0,0)"/>
      <rect id="Rectangle" width="12" height="12" fill="#0171ad"/>
    </g>
  </g>
</svg>

I have placed ios-decrease.svg and md-decrease.svg on src/assets/icon/ion-icons folder.

Janith Widarshana
  • 3,213
  • 9
  • 51
  • 73

1 Answers1

1

The SVG file has a problem. ClipPath is not working on android. This happens on ie browser too. Try with this SVG

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="7" height="4" viewBox="0 0 7 4" style="enable-background:new 0 0 7 4;" xml:space="preserve">
    <path fill="#0171AD" d="M3.5,2.8L0.9,0.1C0.7,0,0.3,0,0.1,0.2C0,0.4,0,0.7,0.1,0.9l3,3C3.3,4,3.7,4,3.9,3.9l3-3C7,0.7,7,0.3,6.9,0.1
 S6.3,0,6.1,0.1L3.5,2.8z"/>
</svg>
Janith Widarshana
  • 3,213
  • 9
  • 51
  • 73
Charitha Surenaka
  • 46
  • 1
  • I tried this solution, it works with ng build, the svg files are copied to www folder and also works in ios/android devices. but when i run ionic serve, svg files cannot be loaded, seems it is not built with ionic serve command, any idea about this? – Eddy Shan Mar 02 '19 at 15:46