Angular Icon Overview
The Angular Icon component allows you to easily display font or choose from a large set of predefined SVG icons, but it also gives you the ability to create custom font icons for your project. Benefiting from a number of attributes, you can define or change the size of the icon in use or apply different styles to it.
Angular Icon Example
Usage
Before using the Icon, you need to register it as follows:
The Icon doesn’t contain any icons on its own. It’s a conduit for displaying any registered SVG images.
Adding Icons
The method above will add an icon named search to a cached collection named material.
In order to use the newly registered icon, all you have to do is to pass the name and collection to the Icon element:
The second method for registering icons is by passing an SVG string to the RegisterIconFromText method:
Then you’d use it in the same way as described in the component sample above.
Size
The icon component supports three icon sizes - small, medium(default), and large. In order to change the size of the icon, you can utilize the --ig-size CSS variable as follows:
You can also set a custom size for the icon component. The best way to do this is by using the --size CSS variable.
igc-icon {
--size: 32px;
}Mirrored
Some icons need to look a little different when used in Right-to-Left(RTL) mode. For that reason we provide a mirrored attribute that, when set, flips the icon horizontally.
Styling
The icon component can be styled by applying styles directly to the Icon element;
igc-icon {
--size: 28px;
color: var(--ig-primary-500);
}