How to customize the menu icon for a plugin?

David_Park · April 8, 2021, 7:11pm

I am building a plugin for the admin interface and would like to replace the “plug” icon in the navigation with something more relevant. Is there a list somewhere of other options or documentation on how to use my own image?

Many thanks in advance.

Gayrat · April 9, 2021, 7:51am

You can see to my test strapi git:

It sets the menu in 3 locations

David_Park · April 9, 2021, 1:53pm

Thanks for that! Followup question: I see where you’ve set “cat” and “paw” as the menu icons in admin/src/index.js, but I’m not sure what those reference. Is there a standard icon set shipped with strapi that we can choose from?

DMehaffy · April 9, 2021, 5:22pm

The logo is set in the main plugin object: Local plugins - Strapi Developer Documentation

For example:

github.com

strapi/strapi/blob/614ce35d3708d7ced3f96e4236187e8f7ea55884/packages/strapi-plugin-i18n/admin/src/index.js#L36

    
      
          });
          
          
const plugin = {
            description: pluginDescription,
            icon: pluginPkg.strapi.icon,
            id: pluginId,
            isReady: false,
            isRequired: pluginPkg.strapi.required || false,
            mainComponent: null,
            name: pluginPkg.strapi.name,
            pluginLogo,
            preventComponentRendering: false,
            settings: {
              global: {
                links: [
                  {
                    title: {
                      id: getTrad('plugin.name'),
                      defaultMessage: 'Internationalization',
                    },
                    name: 'internationalization',

github.com

strapi/strapi/blob/614ce35d3708d7ced3f96e4236187e8f7ea55884/packages/strapi-plugin-i18n/admin/src/index.js#L5

    
      
          import React from 'react';
          import get from 'lodash/get';
          import * as yup from 'yup';
          import pluginPkg from '../../package.json';
          import pluginLogo from './assets/images/logo.svg';
          import CheckboxConfirmation from './components/CheckboxConfirmation';
          import CMEditViewInjectedComponents from './components/CMEditViewInjectedComponents';
          import Initializer from './containers/Initializer';
          import SettingsPage from './containers/SettingsPage';
          import LocalePicker from './components/LocalePicker';
          import middlewares from './middlewares';
          import pluginPermissions from './permissions';
          import pluginId from './pluginId';
          import trads from './translations';
          import { getTrad } from './utils';

https://github.com/strapi/strapi/blob/features/i18n/packages/strapi-plugin-i18n/admin/src/assets/images/logo.svg

DMehaffy · April 9, 2021, 5:23pm

We generally recommend a SVG so that in the future if we (or someone does some customization) to change theming and styles the SVG color can be automatically updated.

Gayrat · April 9, 2021, 10:10pm

At this time Strapi uses fontawesome
Each fontawesome icon has a name.
For example cat:

You can select fontawesome icon and place its name to correspond field