Create Custom Clarity Icons By Combining Existing Icons
June 16, 2020 • CSS, Icons • Published By Josh • 3 minute read
If you’re using the Clarity Design System, you know it provides a great library of SVG icons to use within your application. What if you can’t find that exact icon to fit your specific scenario? Using CSS, you’ll learn how to combine existing icons to create your own custom icon!
Table of Contents
Vertical Nav Example
Let’s say we’re using the Vertical Nav component with icons. The Events menu item is using the icon called “event”. It looks fine, but what we’re really going for is something that symbolizes events and money. There is an icon called “dollar”. If we could somehow combine the “event” and “dollar” icons, the result would portray what we’re looking for.
Clarity does provide an API for its icons, which enables you to add your own icons. However, designing an icon to match the look and feel of what Clarity provides could be tough. Let’s use CSS!
Manipulate the Icon with CSS
Using the browser’s Developer Tools, you can inspect the event icon. For example, in Google Chrome, right click on the icon and select Inspect. Expand the clr-icon and svg elements. Notice that an SVG icon is really made up of multiple elements. If you hover your mouse over each element, you can see what it represents in the icon. These elements can be manipulated with CSS!
Add a unique id to the event icon. In the below example, we defined the id as event-icon. We’ll use this to add some CSS specific to that icon.
<clr-icon id="event-icon" clrVerticalNavIcon shape="event"></clr-icon>
The goal is to position the dollar icon inside the event icon. Set the event icon’s position to relative, which will help in positioning the dollar icon. Since we want the dollar sign inside the event icon, the check mark that’s currently there isn’t needed. It is the element called clr-i-outline-path-1. To hide it, set the display to none.
#event-icon {
position: relative;
}
#event-icon > svg > .clr-i-outline-path-1 {
display: none;
}
Position the Dollar Icon
Nest the dollar icon inside the event icon. Add a unique id to the dollar icon. In the below example, we defined a unique id of dollar-icon. We’ll use this to add some CSS specific to that icon.
<clr-icon id="event-icon" clrVerticalNavIcon shape="event">
<clr-icon id="dollar-icon" shape="dollar"></clr-icon>
</clr-icon>
Set the position of the dollar icon to absolute. This floats it over the event icon. The actual location of the icon is set by using the left and top properties. We set the width of the icon to be a bit smaller so it fits inside the event icon.
#dollar-icon {
left: 2px;
position: absolute;
top: 0px;
width: 12px;
}
Congratulations, you just combined two existing icons to create your own custom icon!
Related Articles
