Product launch icons

[AlexHedley]

Is there a way to use the Product launch icons?

https://fluent2.microsoft.design/iconography

Example - Access

<FluentIcon Value="@(new Icons.Regular.Size24.Access())" />

Existing

<FluentIcon Value="@(new Icons.Regular.Size24.Bookmark())" />

[vnbaaij]

Unfortunately, the product icons are not part of the Fluent UI System Icon collection. They are in a different collection but we are not allowed to distribute that one.

[AlexHedley]

Is the following not possible to use?

Microsoft 365 Product Icons (React)

• https://developer.microsoft.com/en-us/fluentui#/styles/web/m365-product-icons
  • https://github.com/OfficeDev/office-ui-fabric-core (Public archive)

Install-Package OfficeUIFabricCore?

[dvoituron]

We use the SVG format for our icons. This repo does not appear to contain this icon format.

But if you have an SVG file, you can create your icons like this.
https://www.fluentui-blazor.net/Icon#customization

Example:

public static class MyIcons
{
    public class SettingsEmail : Icon { public SettingsEmail() : base("SettingsEmail", IconVariant.Regular, IconSize.Size20, "<svg width=\"20\" height=\"19\" viewBox=\"0 0 20 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.6251 2.5H4.37508L4.2214 2.50428C2.79712 2.58396 1.66675 3.76414 1.66675 5.20833V13.125L1.67103 13.2787C1.75071 14.7029 2.93089 15.8333 4.37508 15.8333H9.76425C9.91725 15.4818 10.1354 15.1606 10.4087 14.8873L10.7126 14.5833H4.37508L4.25547 14.5785C3.50601 14.5177 2.91675 13.8902 2.91675 13.125V6.97833L9.709 10.5531L9.78908 10.5883C9.95267 10.647 10.135 10.6353 10.2912 10.5531L17.0834 6.9775V9.17258C17.5072 9.14483 17.9362 9.21517 18.3334 9.38358V5.20833L18.3292 5.05465C18.2494 3.63038 17.0693 2.5 15.6251 2.5ZM4.37508 3.75H15.6251L15.7447 3.75483C16.4942 3.81568 17.0834 4.44319 17.0834 5.20833V5.565L10.0001 9.29375L2.91675 5.56583V5.20833L2.92158 5.08873C2.98242 4.33926 3.60994 3.75 4.37508 3.75ZM15.9167 10.5579L10.9979 15.4766C10.7112 15.7633 10.5077 16.1227 10.4093 16.5162L10.0279 18.0418C9.86208 18.7052 10.4631 19.3062 11.1265 19.1403L12.6521 18.7588C13.0455 18.6605 13.4048 18.4571 13.6917 18.1703L18.6103 13.2516C19.3542 12.5078 19.3542 11.3018 18.6103 10.5579C17.8665 9.814 16.6605 9.814 15.9167 10.5579Z\" fill=\"#212121\" /></svg>") { } }
}  

[AlexHedley]

If anyone need a copy I wrote a quick script to get them

# https://github.com/OfficeDev/office-ui-fabric-core
# office-ui-fabric-core
# src\data\brand-icons.json

$brands = 'access', 'excel', 'infopath', 'm365', 'office', 'onedrive', 'onenote', 'outlook', 'powerpoint', 'project', 'sharepoint', 'teams', 'visio', 'word'
$sizes = '16x1', '24x1', '32x1', '48x1'
foreach ($size in $sizes) {
    $icon = ""
    $sizeSplit = $size.Substring(0, 2)
    
    foreach ($brand in $brands) {
        Write-Host "${brand} ${size}"
        $url = "https://res-2-sdf.cdn.office.net/files/fabric-cdn-prod_20240411.001/assets/brand-icons/product/svg/${brand}_${size}.svg"

        $res = ""
        # Invoke-WebRequest $url -OutFile "${brand}_${size}.svg"
        try {
            $res = Invoke-WebRequest $url
        } catch {
            Write-Host $_
        }
        
        $res = $res -replace '"', '\"'
        $res = $res -replace "`n", "" -replace "`r", ""

        $capitalBrand = (Get-Culture).TextInfo.ToTitleCase($brand)
        
        $icon += "`t`t"+"public class ${capitalBrand} : Icon { public ${capitalBrand}() : base(`"${capitalBrand}`", IconVariant.Color, IconSize.Size${sizeSplit}, `"${res}`") {} }`r"
    }

    $code = @"
using Microsoft.FluentUI.AspNetCore.Components;

namespace Website.Client
{
    public static class Size${sizeSplit}
    {
$icon
    }
}
"@

    New-Item -Path . -Name "Color${sizeSplit}.cs" -ItemType "file" -Value $code
}

https://github.com/OfficeDev/office-ui-fabric-core/blob/master/src/sass/variables/_CDN.Variables.scss