css Question posted in
Some basic documentation can be found here.

CSS local svg icon color

I am trying to setup some custom svg icons like this

<i class="my-svg-icon"></i>

I have the svg displayed but cannot adjust the color

.my-svg-icon {
    height: 25px;
    width: 25px;
    color: red !important;
    content: url('/mysvg.svg');
}

I have set the stroke in the svg to be currentColor and the fill is none.

Tags:

3

Answers


  1. 0

    CSS mask and -webkit-mask properties are used to display the SVG as a mask image, allowing you to apply the color using background-color: currentColor.

    NOTE: Ensure your SVG uses currentColor for the stroke or fill.

    .my-svg-icon {
    height: 25px;
    width: 25px;
    color: red !important;
    display: inline-block;
    background: none;
    -webkit-mask: url('/mysvg.svg') no-repeat center;
    mask: url('/mysvg.svg') no-repeat center;
    mask-size: contain;
    background-color: currentColor;
}
    Login or Signup to reply.
  2. 0

    Instead of using the i tag, try using the svg tag. By using the svg tag you can add a color property like this:

    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g color="green">
    <rect width="50" height="50" fill="currentcolor" />
    <circle
      r="25"
      cx="70"
      cy="70"
      stroke="currentcolor"
      fill="none"
      stroke-width="5" />
  </g>
</svg>

    Source

    Login or Signup to reply.
  3. 0

    You could mention my-svg-icon svg path to change color.

    Use css:

             .my-svg-icon {
            height: 25px;
            width: 25px;
            display: inline-block;
            color: red;
        }

        .my-svg-icon svg path {
            stroke: currentColor;
            fill: none;
        }

    Below I have shared an example. Hope it helps!

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .my-svg-icon {
            height: 25px;
            width: 25px;
            display: inline-block;
            color: red;
        }

        .my-svg-icon svg path {
            stroke: currentColor;
            fill: none;
        }
    </style>
</head>
<body>
    <i class="my-svg-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" stroke-width="2"/>
        </svg>
    </i>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search