htmlcssiconsmaterial-ui

Change MaterialUI icons font size in css


So here I am trying to increase my icons value 200px, but by default its taking 24px. 24px is the the default for all icon in google icons. So any suggestion!

HTML

<div class="col span-1-of-4 box">
  <i class="material-icons abcd">featured_play_list</i>
  <h3>BBBB BBB BBBB</h3>
  <p>
    XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX
  </p>
</div>

CSS

.abcd{
    font-size: 200px;
    display: block;
    color:#e67e22;
    margin-bottom: 10px;
}

Solution

  • MaterialUI icons use the default size 24px. If you want to change this size without using the icons size classes provided by M-UI like .md-18, you will have to use the !important rule:

    .abcd{
        font-size: 200px !important;
        display: block;
        color:#e67e22;
        margin-bottom: 10px;
    }