Is there a way to scale down and up the size of icons displayed in buttons?
The button’s font size will increase the icon size accordingly I believe; however, I think you want the icon size to change independently. In that case you may be able to extrapolate from this wonderful post that details how to change the color property of an icon independently from text color.
1 Like
I looked at it, not very useful I think. The problem is that I cant see how to change the “role” for the icons displayed inside buttons. I would need to do that to be able to change icon properties via roles.
Hmm…I found Shaun’s post helpful, but you need to extrapolate a bit 
.
If you inspect the HTML by clicking “Edit”, shown below, you will see how he adjusted the CSS color property of the icon.
Now all you need to do is adjust the function to target the font-size property instead, and pass along the desired icon size as an integer. The result is an icon with a different size than the text as shown here:
Let me know if I’m misunderstanding the request and I can try to help further. Good luck!
3 Likes
I’m not finding this HTML option within my properties panel, would it be a premiun feature?
You did understand exactaly what I need ! 
You have to clone Shaun’s app in the post above and click on his custom component. Once that is selected you will see the option to edit the HTML (this option is only available if you have clicked on the custom component).
1 Like
Only Custom HTML Forms have HTML in the properties panel. They are available to all Anvil users! Here’s the docs about them.
Normally, Forms are based on an HTML template that’s defined in Assets. The default template in Material Design is standard-page.html but you can define your own.
Custom HTML Forms are different because you write the HTML directly into the Form.
4 Likes
Did it!! Many thanks!
4 Likes
Awesome. Looks great.
1 Like
Hi! Reviving this topic, can someone please guide me on how exactly to do it? I don’t know much about html and css so I can’t figure out how to set the font size property.
Changing the text size has an impact on the size of an icon but also changes the text size. If you are just creating a link/button with an icon only this approach works.
two extra methods:
with anvil.js
import anvil.js
def scale_up_icon(component, scale=2):
dom_node = anvil.js.get_dom_node(component)
for icon in dom_node.querySelectorAll('i'):
icon.style.fontSize = f'{scale}em'
##example
scale_up_icon(self.button_1, 3)
with roles
/* in theme.css */
.anvil-role-icon-2x i.fa {
font-size: 2em;
}
The roles approach has the advantage of being visible in the design view.
If you want a button to have multiple roles you’ll have to do this in code
self.button_1.role = ['primary-color', 'icon-2x']
4 Likes
I’m amazed at how you know all these things. Once again, it worked perfectly.
1 Like
By the way is there a way to make my icons get aligned at bottom so that the text will come on top and icon at bottom?
You should make that a feature request.
currently you can set the icon-align to top but not bottom
to set it to bottom you could set it to top and override the css 
(only works on buttons)
.anvil-role-icon-2x.anvil-component-icon-present .anvil-component-icon.left.top-icon {
display: none !important;
}
.anvil-role-icon-2x.anvil-component-icon-present .anvil-component-icon.right.top-icon {
display: block !important;
margin: auto;
}
2 Likes
Luckily I needed it for buttons only so it did the job for now. Once again, thanks for your help