1

I have tried this. But It does not get filled on hovering.

.flag-icon
{
  fill:white;
}

.flag-icon:hover
{
  fill:red;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Roboto+Mono:400,500|Material+Icons" rel="stylesheet">

<span class="material-icons flag-icon">outline_flag</span>
Akif
  • 7,098
  • 7
  • 27
  • 53
Asha SIngh
  • 39
  • 6

2 Answers2

1

Use color instead of fill.

See the snippet bellow:

.flag-icon{
  color:blue;
}
.flag-icon:hover{
  color:red
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Roboto+Mono:400,500|Material+Icons" rel="stylesheet">

<span class="material-icons flag-icon">outline_flag</span>

Edit - Filled x outlined icons.

To have the outlined style one must add the class material-icons-outlined.

If you want to change from a outlined icon to a filled icon on hover, you may use the following code that relies on a simples jquery script:

$(document).ready(function(){
  $('.flag-icon').hover(function(){
    $(this).removeClass('material-icons-outlined');
  }, function(){
    $(this).addClass('material-icons-outlined');
  });
});
.flag-icon:hover{
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Sharp|Material+Icons+Round|Material+Icons+Two+Tone" rel="stylesheet">

<span class="flag-icon material-icons material-icons-outlined">flag</span>

Take a look at this question for more examples: How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?

francisco neto
  • 797
  • 1
  • 5
  • 13
0
.flag-icon::before {
        font-size: 18px;
        margin-top: 5px;
        font-family: "Material Icons";
        transition: 0.1s ease;
        content: 'outlined_flag';
    }
    
    .flag-icon:hover::before {
        content: "flag";
        color: red;
    }
Asha SIngh
  • 39
  • 6