How to deal with nested menu items when landing on Wordpress?

Question

WordPress

Good morning!
there is such a piece of HTML nested menu code

<!-- <ul class="mainNavigation" id="mobile">
                <li id="toggle"><a href="" class="mainLink" >Ассортимент</a>
                    <ul class="dropDown" id="drop">
                        <li id="check1"><a href="" class="drop-down-menu"><div class="miniIcon miniCottage"></div><span>sometext</span></a></li>
                        <li><a href="" class="drop-down-menu"><div class="miniIcon miniProfi"></div><span>sometext</span></a></li>
                        <li><a href="" class="drop-down-menu"><div class="miniIcon miniGreen"></div><span>sometext</span></a></li>
                    </ul>

It is only about the nested menu (.drodDown). First, in the admin panel, in the menu section, I add pages, put them as children to one of the main ones, and Wordpress itself makes them through li in ul. The classes themselves ul, li and links, I, with the help of your advice, could change. But now what to do with nested icons and span in the menu? how to make them visible again?
- Rewrite layout and styles?
- edit the pages themselves in the admin panel? (if so, how exactly?)
Each submenu item has its own icon, which changes on hover and span with the name, which also changes color on hover.
Most of all, even the icon is of interest.

Answer 1

Kind.
Classes can be added to menu items from the editor. You need to go to the Appearance -> Menu section and enable the display of classes in the "Screen Settings" tab in the upper right corner.
Actually assign, but <div class="miniIcon miniProfi"></div>implement using css-selector miniProfi:before.