MaterializeCSS : two lines in a button

Question

I'm using MaterializeCSS, and I'd like to be able to enable long texts in a button to appear on 2 lines instead of being truncated.

Here is a clear example : Demo

<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>juste change the panel size to see what i'm talking about</a>

I already tried to change the "line-height" property of the btn class. This works quite well, but then if the screen is large enough for the content to be displayed on one line, the text and icon will stick at the top of the button, yet i would like these to be vertically centered.

Is there a solution? Thanks!

Answer 1

You can apply this style to override the existing styling:

.btn.waves-effect {
    height: auto;
    min-height: 20px;
    line-height: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
}

Your example, updated: http://jsfiddle.net/kgy6j0k5/3/

Edit: with icon centered vertically

.btn.waves-effect {
    height: auto;
    min-height: 20px;
    line-height: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 50px;
}

.btn.waves-effect .material-icons {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -10px;
    margin-left: 0;
}