Reputation: 945

How to add color inside an icon?

I'm trying to color the background of an icon (from material-icons) but not beyond its outline (images illustration below).

As shown on this jsfiddle, I was only able to color the background but it does not fit the icon perfectly.

.material-icons {
  background:white;
}

Start :

What I try to get:

What I succeed to do :

I did not find a filled version of the icon. Ideally I don't want to use an other font just to answer that problem. Is it possible to do that in CSS or do I have to use a different version of the icon?

Upvotes: 9

Answers (7)

Marcus

Reputation: 1

Another solution is to create a radial-gradient background:

background: radial-gradient(circle, rgba(255,255,255,1) 51%, rgba(128,128,128,1) 53%);

This worked great in the example mentioned above.

Upvotes: 0

moun

Reputation: 29

Another approach is to directly draw a circle that matches icon's contour inside the svg. The first <path/> inside a material's icon is the square box surrounding the actual icon's path. This method replaces it with a circle slightly smaller than the icon's contour, then filling it with some color. For example:

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    height="24px" 
    viewBox="0 0 24 24" 
    width="24px" 
    fill="#000000">
    <path d="M0 0h24v24H0z" fill="none"/> <!-- square box to be replaced by a circle -->   
    <path 
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>

Is replaced by:

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    height="24px" 
    viewBox="0 0 24 24" 
    width="24px" 
    fill="#000000">
    <circle cx="12" cy="12" r="8" fill="#ffffff"/>
    <path 
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>

body {
  background-color: #6b6b69;
}

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    height="64px" 
    viewBox="0 0 24 24" 
    width="64px" 
    fill="#000000">
    <circle 
        cx="12" 
        cy="12" 
        r="8" 
        fill="#ffffff"/>
    <path 
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>

Upvotes: 0

Jeremy

Reputation: 161

Using absolute positioning, a 15px by 15px div, and border-radius 50% worked for me in JSFiddle.

HTML:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="block">
  <div class="icon">
    <p class="iconfix">
      <i class="material-icons" style="color:green">check_circle</i>
    </p>
  </div>
</div>

CSS:

.block {
  width: 100px;
  height: 100px;
  background: grey;
}

.icon {
  background: #fff;
  width:15px;
  height:15px;
  border-radius: 50%;
  position: absolute;
  top: 1em;
  left: 1em;
}

.iconfix {
  position: absolute;
  top: -1.2em;
  left: -0.2em;
}

Upvotes: 7

Facundo La Rocca

Reputation: 3866

The problem you are facing is that your icon looks like this, it is a circle into a square.

Try with this SVG Or this one.

.block {
  width: 100px;
  height: 100px;
  background: grey;
}

.whiteBackground {
  background-color: white;
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.cls-1
{fill:green;}

.cls-2{fill:#fff;}

.orange{
  width: 25px;
}

<div class="block">
  <div class="whiteBackground">
<svg enable-background="new 0 0 24 24" height="24px" id="Layer_1" version="1.1" viewBox="0 0 24 24" width="24px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g><path d="M12,0C5.373,0,0,5.373,0,12c0,6.628,5.373,12,12,12c6.627,0,12-5.372,12-12C24,5.373,18.627,0,12,0z M19.754,9.561    l-8.607,8.607c-0.176,0.177-0.462,0.177-0.637,0l-1.272-1.285c-0.175-0.176-0.462-0.464-0.636-0.642l-2.96-3.112    c-0.087-0.087-0.133-0.21-0.133-0.327c0-0.115,0.046-0.227,0.133-0.314l1.297-1.169c0.088-0.09,0.205-0.134,0.321-0.134    c0.114,0.001,0.228,0.046,0.315,0.134l2.936,2.995c0.175,0.178,0.461,0.178,0.637,0l6.699-6.681c0.176-0.177,0.461-0.177,0.636,0    l1.272,1.285C19.93,9.094,19.93,9.384,19.754,9.561z" fill="green"/></g></g></svg>
  </div>
  
<svg class="orange" data-name="Layer 1" id="Layer_1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><defs><style></style></defs><title/><circle class="cls-1" cx="68.31" cy="64" r="60"/><polygon class="cls-2" points="61.19 88.14 89.09 42.49 83.8 40.12 59.56 80.23 46.27 72.19 43.08 77.46 61.19 88.14"/></svg>
</div>

Upvotes: 0

Bhavin Shah

Reputation: 2482

.block {
  width: 100px;
  height: 100px;
  background: grey;
}

.block i {
  color : green !important;
}

.material-icons{
  background:white !important;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="block">
    <i class="material-icons" style="color:green">check_circle</i>
</div>

Is this the same that you are looking for?

Here is JSFiddle

Hope this helps.

Upvotes: -1