How to round button in Svelte Material UI

Question

I need a circle button using sveltemateriaui. There isn't any similar example in https://sveltematerialui.com/demo/button but trying to get it using plain css I've got it this: https://svelte.dev/repl/8cc5be4c6b1245e88aa9a12c7fc550dc?version=3.37.0 is not a circle, is an ellipse.

The only way that I got it is to set width and height more than 50 px, but in this case, the button is too large.

How can I get a circle button with icon close centered vertically and horizontally?

Answer 1

I think what you're looking for is a floating action button:

<Fab variant="raised">
    <Icon class="material-icons">close</Icon>
</Fab>

<script>
  import Fab, { Icon } from '@smui/fab';
</script>

Svelte Material UI docs
Example REPL