Summary
We get asked questions on icons for Employee Center topics, Catalog Items, and areas that allow an upload of an image where folks want to use an icon. Below is an engineering solution to this design problem. The portal technology uses Font Awesome, so these icons should fit well with OOTB iconography. With the free version there is roughly 2k icons to choose from. With the Pro version there is 33k icons.
Credit goes to John Gosen for coming up with the orginal Powershell script. I then updated it to fit the latest version (as of the writing of this article) and a script for the free version.
How to get PowerShell
Windows
In order for you to do the below steps you need PowerShell. PowerShell comes with windows and you should be able to find it in your list of applications on a windows machine.
Mac
However, if you're on a Mac you'll need to install homebrew and PowerShell, which requires xcode. It only takes a few commands in Terminal application. You will need to be an admin on your Mac to run these commands in Terminal.
xcode-select --install
brew install powershell/tap/powershell
pwsh
pwsh runs PowerShell and you can then enter the below powershell scripts.
Font Awesome Pro
This will walk you through downloading Font Awesome Pro (currently $99) and altering the colors to fit your brand for a quick solution to having over 30k+ icons.
First go to the download page of Font Awesome and download "Pro for Desktop" (at the writing of this article I used version 6.5.1)
After unzipping, you want to get the path to \fontawesome-pro-6.5.1-desktop\svgs\duotone.
Open up a code editor of your choice and paste in the powershell script:
$directory="<PATH HERE>\svgs\duotone"; $style=".fa-primary{opacity:1;fill:#305AF3}.fa-secondary{opacity:1;fill:#041459}"; Get-ChildItem -Path $directory -Filter "*.svg" | ForEach-Object { $svgCode = Get-Content -Path $_.FullName -Raw; $modifiedSVGCode=$svgCode -replace '<style>.fa-secondary{opacity:.4}</style>', "<style>$style</style>"; Set-Content -Path $_.FullName -Value $modifiedSVGCode}
Change the $directory="<PATH HERE>\svgs\duotone" with your path to the duotone folder. Update the two places with fill: with your desired colors.
Next go to Windows PowerShell and paste in your code and hit enter! There are quite a few icons, so give it a few minutes and you're SVG files in that folder should get updated with your two colors of choice! Now you can search FontAwesome icons to find what you want, then upload the coorisponding SVG to your topic, catalog item, etc.
Example two tones (but you can put whatever colors you want in
Font Awesome Free
Sometimes we may have to go without the Pro. Here are the same steps as above but a slightly different script for Free.
First go to the download page of Font Awesome and download "Free for Desktop" (at the writing of this article I used version 6.5.1)
After unzipping, you want to get the path to \fontawesome-free-6.5.1-desktop\svgs\solid.
Open up a code editor of your choice and paste in the powershell script:
$directory="<PATH HERE>\svgs\solid"; $style="path{opacity:1;fill:#305AF3}"; Get-ChildItem -Path $directory -Filter "*.svg" | ForEach-Object { $svgCode = Get-Content -Path $_.FullName -Raw; $modifiedSVGCode=$svgCode -replace '<path', "<style>$style</style><path"; Set-Content -Path $_.FullName -Value $modifiedSVGCode}
Change the $directory="<PATH HERE>\svgs\solid" with your path to the solid folder. Update the #305AF3 with your disired color.
Note: the svg XML doesn't have a style area so we're just taking the <path> in the XML and pre-pending <style> behind it. Also, onces its there if you need to change the color you will have to use this script to update the color:
$directory="<PATH HERE>\svgs\solid"; $style="path{opacity:1;fill:#305AF3}"; Get-ChildItem -Path $directory -Filter "*.svg" | ForEach-Object { $svgCode = Get-Content -Path $_.FullName -Raw; $modifiedSVGCode=$svgCode -replace '<style>path{opacity:1;fill:#305AF3}</style>', "<style>$style</style>"; Set-Content -Path $_.FullName -Value $modifiedSVGCode}
Enjoy!
