سلام. وقت بخیر
۱. استایل پیش‌فرض کلاس‌ها

ممکنه کلاس‌های پیش‌فرض MDI، به صورت مستقیم سایز آیکون‌ها را از طریق یک ویژگی دیگه (مثل width یا height) کنترل کنن و یا ویژگی font-size در آن‌ها override شده باشه. برای حل این مشکل:

مطمئن شید که پراپرتی font-size در استایل‌های شما بر کلاس آیکون غالب باشد.

از !important استفاده کنید تا اولویت این پراپرتی بالا بره.

۲. استفاده از تگ اشتباه

آیکون‌های MDI معمولاً به صورت فونت در تگ‌هایی مثل <i> یا <span> قرار می‌گیرن. اگر از تگ‌هایی مثل <svg> استفاده کنید، پراپرتی font-size کار نمی‌کنه. برای تغییر سایز در این حالت باید از width و height استفاده کنید.

۳. عدم اعمال کلاس صحیح

ممکنه کلاس‌های مربوط به MDI به درستی اعمال نشده باشن. برای اطمینان از اینکه فونت آیکون‌ها درست اعمال شدن، بررسی کنید که کلاس مربوطه (material-icons) به عنصر مورد نظر اضافه شده باشه.

۴. تنظیمات CSS دیگه‌ای که سایز رو override می‌کنن

اگر در پروژه‌ی شما فایل‌های CSS دیگه ای وجود دارن که سایز آیکون‌ها رو کنترل می‌کنن، ممکنه تنظیمات اون فایل‌ها باعث override شدن پراپرتی شما بشن. برای بررسی:

از ابزار Inspect مرورگر استفاده کنید و بررسی کنید که آیا پراپرتی font-size شما توسط استایل دیگه ای بازنویسی شده یا خیر.