goauthentik / goauthentik/authentik
FontAwesome icon support only includes fas (solid) icons, missing fab (brands) for social login providers
- Dominant language
- Python
- Stars
- 25.6k
- Forks
- 2k
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 634
Description
### Describe the bug
The FontAwesome icon support introduced in PR #19233 (commit d949564) only supports fas (FontAwesome Solid Classic) icons but does not support fab (FontAwesome Brands) icons. This severely limits the usefulness of the feature since most social login providers (Google, LinkedIn, Facebook, Twitter, etc.) use brand icons from the fab icon set.
### How to reproduce
1. Go to Admin Interface → Applications → Providers → Social Login Provider
2. Try to set a FontAwesome brand icon (e.g., `fa://fa-google`, `fa://fa-linkedin`, `fa://fa-facebook`)
3. The icon will not display correctly because the code hardcodes `fas` class instead of allowing other icon families
### Expected behavior
The FontAwesome icon support should allow manual specification of different FontAwesome icon families, such as:
- `fas` - FontAwesome Solid Classic
- `fab` - FontAwesome Brands (essential for social login providers)
- `far` - FontAwesome Regular
- `fal` - FontAwesome Light (if available)
For example, allow syntax like `fa://fab/fa-google` or `fa://fa-brands/fa-linkedin` to manually specify the icon family.
### Screenshots
Current code in `web/src/elements/utils/images.ts` line 35 hardcodes `fas`:
```
const classes = [className, "font-awesome", "fas", src.slice(FontAwesomeProtocol.length)]
```
### Additional context
Social login providers typically use brand icons:
- Google: `fa-google` (fab)
- LinkedIn: `fa-linkedin` (fab)
- Facebook: `fa-facebook` (fab)
- Twitter/X: `fa-twitter` (fab)
- GitHub: `fa-github` (fab)
While some social login providers already have icons included in Authentik, many others (e.g., LinkedIn) do not, making FontAwesome brand icons the only viable option for consistent branding.
### Deployment Method
Docker
### Version
2025.12.1
### Relevant log output
```shell
No relevant log output - this is a frontend icon rendering limitation.
```
Contributor guide
Research direction
Start in web/src/elements/utils/images.ts at the FontAwesomeProtocol handling and the classes array around line 35. Trace how fa:// sources are converted into CSS classes, then verify that the existing solid-icon syntax still works alongside manually specified fab, far, or other supported families. Done means brand icons such as fa://fab/fa-google render correctly in the Admin Interface.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100