MagicMirror² v2.14.0 is available! For more information about this release, check out this topic.

MMM-CalendarEXT2 - Change Icon Size

  • Hi,

    Having some trouble getting the right code in my custom.css for changing icon sizes for this particular module only. any help would be great as i would like to increase the icon size by roughly +15% or so.


  • Module Developer

    It depends on font-size of event basically.
    See this;

    .CX2 { /* default values which are used frequently or dependently */
      --row-min-width: 100px;
      --row-max-width: 1000px;
      --column-min-width: 300px;
      --column-max-width: 400px;
      --font-size: 16px;

    Adjust --font-size as your wish.

    Of course, you can forcibly set eventIcon on CSS also.
    By default it is defined like this. (MMM-CalendarExt2.css)

    .CX2 .period .eventIcon {
      min-width: calc(var(--font-size) * 2);
      min-height: calc(var(--font-size) * 2);
    .CX2 .weekSlot .eventIcon {
      min-width: var(--font-size);
      min-height: var(--font-size);

    So you can redefine/override them in your css/custom.css. But for harmony with text, I recommend you to use --font-size globally.

  • @Sean
    thanks for the help, i didnt realize icon size was set by --font-size as well, i will take your advice and run with adjusting the font globally for the module.

    thanks alot!

Log in to reply