如何通过纯CSS增大Materialize CSS中Google图标的尺寸？

针对你的需求，有两种简单的纯CSS方法可以放大Material Symbols图标，都是基于字体图标的特性来实现的：

方法一：直接调整字体大小（最直观） #

Material Symbols本质是字体图标，修改font-size就能直接改变图标尺寸。你可以给目标图标加自定义类，或者全局修改所有图标：

步骤1：给图标添加自定义类（仅放大特定图标） #

修改你的HTML代码，给图标span加个自定义类，比如icon-large：

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

步骤2：添加CSS样式 #

在你的样式文件（或页面内的<style>标签）中写入：

.icon-large {
  font-size: 48px; /* 替换成你需要的尺寸，默认通常是24px */
}

如果要全局放大所有Material Symbols图标，直接针对默认类设置：

.material-symbols-outlined {
  font-size: 48px;
}

方法二：使用Material Symbols专属CSS变量（贴合图标设计规范） #

Material Symbols支持通过CSS变量控制图标核心参数，包括尺寸（opsz），写法如下：

.material-symbols-outlined {
  --material-symbols-outlined-opsz: 48; /* 数值对应图标尺寸，范围20-48 */
}

这种方法更贴合Material Symbols的设计逻辑，尺寸变化会更自然。

两种方法都不会和Materialize CSS产生冲突，选你觉得更易操作的即可。

内容的提问来源于stack exchange，提问作者Adamu Abdulkarim Dee