Styling the Telerik ASP.NET RadButton to have a centered icon

Styling a Telerik RadButton to behave like a true square icon button isn’t as simple as dropping in an image and shrinking the width. Telerik’s default padding, text wrappers, and icon alignment rules all work against a perfectly centered, minimalist design. In this article, we’ll walk through how to strip the control down to its essentials, lock in a fixed square shape, and center a single icon cleanly in the middle — producing a crisp, modern button that fits seamlessly into a flat UI

 

 

<telerik:RadButton runat="server" ID="btnProjectLookup"
    Icon-PrimaryIconCssClass="PrimaryIcon"
    CssClass="IconOnlyButton"
    Icon-PrimaryIconUrl="/Images/search_16dp_333333_FILL0_wght400_GRAD0_opsz20.png" ></telerik:RadButton>

 

.PrimaryIcon {
    margin-left:7px !important;
}
.IconOnlyButton {
    width:40px !important
}

 

 


RealWorldCode gives developers practical, real‑world solutions with clean, working code — no fluff, no theory, just answers.
Links
Home
Knowledge Areas
Sitemap
Contact
Et cetera
Privacy Policy
Terms and Conditions
Cookie Preferences