在 css 中更改 MaterialUI 图标字体大小

Question

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;
}

Answer 1

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;
}