How to change the size of icons Svelte Material UI?

Question

I am using Svelte Material UI and very new to Svelte.

I understand that I can choose the size?: 'normal' | 'mini' | 'button';

I need to have a very big button.

How can I change the size of `IconButton` to 60px?

<script>
    import IconButton, { Icon } from '@smui/icon-button';
    import { mdiPlusCircle } from '@mdi/js';
    import { Svg } from '@smui/common';
</script>

<div class="container">
    <div class="new-request">
        <div>
            <IconButton class="material-icons" size="normal">
                <Icon component={Svg} viewBox="0 0 24 24">
                    <path fill="currentColor" d={mdiPlusCircle} />
                </Icon>
            </IconButton>
        </div>
        <div class="mdc-typography--overline" style="font-size:1.8rem;">New request</div>
    </div>
</div>

<style>
    .container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        margin: auto;
        height: 100%;
    }
    .new-request {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>

Answer 1

You just need to add some CSS. Worth noting points:

• Because class name given to IconButton isn't picked up by Svelte compiler and scoped, you'll need to use :global(...) here.
• Instead of class name, I use id <IconButton id="xl-button" ...> to raise selector specificity, so that my CSS rules can override those included in MUI.
• With help of Chrome devtool inspector, I could calculate the scale factors between parts within the button (4 and 2, see below). CSS variable comes handy here, you just need to adjust --unit: <number>px; to scale all those parts.

:global(#xl-button) {
  --unit: 40px; # <- tune the number as you like
  padding: var(--unit);
  height: calc(4 * var(--unit));
  width: calc(4 * var(--unit));
}

:global(#xl-button svg) {
  width: calc(2 * var(--unit));
  height: calc(2 * var(--unit));
}

Open up https://svelte.dev/repl/ and copy-paste below snippet to see it live.

<script>
  import IconButton, { Icon } from "@smui/icon-button";
  import { mdiPlusCircle } from "@mdi/js";
  import { Svg } from "@smui/common";
</script>

<svelte:head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/[email protected]/bare.min.css"
  />
  <!-- Material Icons -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <!-- Roboto -->
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"
  />
  <!-- Roboto Mono -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono" />
</svelte:head>

<div class="container">
  <div class="new-request">
    <IconButton class="material-icons" id="xl-button" size="mini">
      <Icon component="{Svg}" viewBox="0 0 24 24">
        <path fill="currentColor" d="{mdiPlusCircle}" />
      </Icon>
    </IconButton>
    <div class="mdc-typography--overline" style="font-size: 1.8rem">New request</div>
  </div>
</div>

<style>
  :global(#xl-button) {
    --unit: 40px;
    padding: var(--unit);
    height: calc(4 * var(--unit));
    width: calc(4 * var(--unit));
  }

  :global(#xl-button svg) {
    width: calc(2 * var(--unit));
    height: calc(2 * var(--unit));
  }

  .container {
    display: flex;
    flex-direction: column;
    place-items: center;
  }

  .new-request {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>