As a backend developer, I prefer to use bootstrap or materialize css to design a web page, now I want to increase the size an icon, but the only way to do this, is by using pure css, but i have little knowledge about it, is there anyone who can help me to increase the size of this google icon:

I’am using materialize css:

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> 

google icons links:

      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<div class="col">
      <a href="{% url 'Create-Primary-Albums' %}"><span class="material-symbols-outlined">
       create_new_folder
   </span></a>
</div>

>Solution :

You can increase the icon size by increasing your font-size value in css. You can either use SaaS to modify your martialize CSS file or you need to add your custom css to increase the icon-size.

You can increase size by using in-line css. You can adjust the font-size value is pixel or other varients like rem to get the size you want. See the code below…

<div class="col">
      <a href="{% url 'Create-Primary-Albums' %}">
         <span class="material-symbols-outlined" style="font-size: 20px;">
            create_new_folder
         </span>
      </a>
</div>