How to get SVG colored icons

Ionic Framework ionic-v3
1

I am using SVG icons in my application.
But i am not able to get the SVG colored icons.
It always become black and white in color.

How can i get the colorful SVG icons, as it is ?

I am using below code snippet to get CSS class.
And then apply in html like: <ion-icon class="fn-navigate"></ion-icon>

ion-icon {
    &[class*="fn-"] {
        -webkit-mask-size: contain;
        -webkit-mask-position: 50% 50%;
        -webkit-mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    
    &[class*="fn-navigate"] {
        -webkit-mask-image: url(../assets/images/navigate.svg);
    }
    &[class*="fn-call"] {
        -webkit-mask-image: url(../assets/images/call.svg);
    }
}
1 Like
2

This css should use SVG as a mask, so it should be single color.
Use <img src="x.svg"> to get full color.

1 Like
3

Hi @sonicwong78, Thanks for your comment.
i did not get your second line, seems something missing.
Could you please help me understanding it ?

4

Try

.icon {
  fill: #488aff;
}
1 Like
5

I have checked this @pwespi, but it always gives a single color.
My requirement is to display the SVG colored icons as it is.
The icon color could be single color or multi-color.

6

Hello,
take a look to your svg file. Maybe it is styled with an external css. In this case you need this style sheet too or change styling by our self.

Best regards, anna-liebt

1 Like
7

I mean use “img” tag with src=“file.svg”.

1 Like
8

Thanks @anna_liebt for tutorial link. it really helped me to understand the concepts of SVG.

9

Thanks @sonicwong78 for your input. i tried it and its working fine and able to get the colored icons in my page :slight_smile:

10

As mentioned above <img src="x.svg"> worked fine but i did not want to hard code my html.
So, i fixed the above mentioned class approach as below:

ion-icon {
    &[class*="fn-"] {
       background-size: contain;
       background-position: 50% 50%;
       background-repeat: no-repeat;
       width: 1em;
       height: 1em;
    }
    
    &[class*="fn-navigate"] {
       background-image: url(../assets/images/navigate.svg);
    }
    &[class*="fn-call"] {
        background-mage: url(../assets/images/call.svg);
    }
}

and applied in html like: <ion-icon class="fn-navigate"></ion-icon>

I had to do one more correction with my svg icons.
My svg icons had height & width in their svg tag (mentioned below). i just removed it.

<svg version=“1.1” xmlns=“http://www.w3.org/2000/svg” xmlns:xlink=“http://www.w3.org/1999/xlink” xmlns:a=“http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/” x=“0px” y=“0px"
width=“340px” height=“98px” –removed it
viewBox=”-0.4 -0.5 340 98" enable-background=“new -0.4 -0.5 340 98” xml:space=“preserve”>

And now, all multi-colored icons are working great :smile:

You could use “-webkit-mask” approach (mentioned in my topic’s description), if you want single color icon, and you want to customize the icon color as per your need. ex:

if you want specific icon to be in red color.

&[class*="fn-call"] {
        -webkit-mask-image: url(../assets/images/call.svg);
        color: red;
 }
1 Like
11

Hello,
with removing width and heigh it will scale as expected. This are the smart knowledge that make life easier.

img tag is easiest implemtation, also css background image. If you need more control over svg you can embed it for example in a component like html. With ngclass, ngstyle you change your style dynamically, also you can animate it or whatever you want.

As I see on your svg snippet this tools can also do something for you and removes all unecessary content.

https://jakearchibald.github.io/svgomg/

Best regards, anna-liebt.

1 Like
12

Thanks a lot @anna_liebt for your guidance.
SVGOMG is a wonderful tool, reduced my svg icons size up to 80%, great :slight_smile:

13

See: Anyway to custom the tabbar's icon with my own svg file?