"reindeer" button rendering issue with bigger icons: 48x48


When trying to make a toolbar like the sample "addressbook" application with Reindeer theme,  I can't get the button to display correctly. (They display correctly when inherit "runo" theme. But all my other components are based on the "reindeer" theme. ) 

My other buttons with small icons work just fine. 

Here are the CSS items I copied from the demo code:

.toolbar .v-button {
display: block;
width: 80px;
height: 80px;
background: transparent;
border: none;
text-align: center;
padding: 0;

.toolbar .v-button img {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;

.toolbar .v-button span {
font-size: x-small;
text-shadow: #fafafa 1px 1px 0;

The images I am using are 48x48. What I got is the icon and small button that is about 1/3 of the height of the icon…

How can I make the “reindeer” button resize together with my icons?

Also, when running with “runo” theme, I notice that the mouse pointer changed to a “hand” when the mouse is on the button. It does not do that running with “reindeer” theme. How can we set that behavior?


Short answer, you can’t. Here’s an older ticket about this exact issue, it contains all the explanations why it doesn’t work:
#3144: Button height/width not working as expected with Reindeer theme

You can get the buttons to work as expected is you use the NativeButton component. They will not look like the normal buttons, but they are magnitudes easier to theme.

Here’s how:

.toolbar .v-button {
    cursor: pointer;

And if the priority of the selector isn’t high enough (i.e. the cursor still doesn’t change), add .v-app in front of the .toolbar. And if you end up using NativeButtons, change .v-button to .v-nativebutton.

Hope this helps.