BlazorGoogleMaps

To use Open Iconic icons within a Foundation project, include the Foundation-specific stylesheet and use the fi-icon-name class pattern on a <span> element.

<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">

<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>

If you require marker clustering functionality, you must manually add the Google Maps marker clusterer script to your HTML entry file.

<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

To use the icon font without Bootstrap or Foundation, include the default stylesheet and use the oi class with the data-glyph attribute to specify the icon name.

<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">

<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>

To use the icon font with Bootstrap, include the Bootstrap-specific stylesheet and use the oi class followed by the icon name class.

<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">

<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>

To use the icon font without Bootstrap or Foundation, include the default stylesheet and use the oi class combined with the data-glyph attribute on a <span> element.

<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">

<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>

Install the BlazorGoogleMaps package using the .NET CLI or NuGet Package Manager Console to integrate Google Maps into your Blazor WebAssembly or Blazor Server application.

dotnet add package BlazorGoogleMaps

The SVG sprite allows you to load all icons in a single request. To use an icon, reference the open-iconic.svg file followed by a hash and the icon name inside a <use> tag within an <svg> element.

Styling Tips:

• Sizing: Set equal width and height on the <svg> tag. All icons are square.
• Coloring: Use the CSS fill property on the <use> tag to change the icon color.
• Best Practice: Add a general class to the <svg> tag for shared styles and a unique class to the <use> tag for icon-specific styling.

<svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>

Add the required JavaScript interop file to your application's entry HTML file (wwwroot/index.html for WASM or _Host.cshtml/_HostLayout.cshtml for Server).

<script src="_content/BlazorGoogleMaps/js/objectManager.js"></script>

You can display icons as individual SVG files. Treat them like any other image element and ensure you include an alt attribute for accessibility.

<img src="/open-iconic/svg/icon-name.svg" alt="icon name">

Register the library in your Program.cs file. You can use simple configuration, advanced options for specific libraries/versions, or a custom key service for asynchronous loading.

// Option 1: Simple Configuration (Recommended)
builder.Services.AddBlazorGoogleMaps("YOUR_GOOGLE_API_KEY");

// Option 2: Advanced Configuration
builder.Services.AddBlazorGoogleMaps(new GoogleMapsComponents.Maps.MapApiLoadOptions("YOUR_GOOGLE_API_KEY")
{
	Version = "beta",
	Libraries = "places,visualization,drawing,marker"
});

// Option 3: Custom Key Service (e.g., for async loading)
builder.Services.AddScoped<IBlazorGoogleMapsKeyService, YourCustomKeyService>();

To use the icon font with Foundation, include the Foundation-specific stylesheet and use the fi- prefix for the icon name class.

<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">

<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>

The SVG sprite allows you to load all icons in a single request. To use an icon, reference the sprite file and the specific icon ID within a <use> tag inside an <svg> element.

Styling Tips:

• Sizing: Set equal width and height on the <svg> tag.
• Coloring: Use the CSS fill property on the <use> tag to change the icon color.
• Best Practice: Add a general class to the <svg> tag for shared styles and a unique class to the <use> tag for icon-specific styling.

<svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>

<style>
.icon {
  width: 16px;
  height: 16px;
}

.icon-account-login {
  fill: #f00;
}
</style>