You are definitely on the right track, but wp_nav_menu will output a menu with a lot of containers and classnames; to keep it semantic in the terms of Semantic UI, you’ll be in good hands if you build the structure yourself.
Get the name of the registered menu in the menu manager. Check register_nav_menu in your functions.php if you’re unsure. This is for example what it looks like in the Twenty Thirteen-Theme:
register_nav_menu( 'primary', __( 'Navigation Menu', 'twentythirteen' ) );
(In your case it is probably about-menu.)
You can use the snippet below to generate your custom menu via the menu name (we’ll be able to get all the details (e.g. location, id,…) of the registered menu automatically)
<?php
$menu_name="primary"; // this is the registered menu name
if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) :
$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
$menu_items = wp_get_nav_menu_items($menu->term_id);
echo '<div class="ui secondary vertical pointing menu">';
foreach ( (array) $menu_items as $key => $menu_item ) :
$title = $menu_item->title;
$class = $menu_item->classes; // get array with class names
if ( get_the_ID() == $menu_item->object_id ) { // check for current page
echo '<a class="item active">';
} else {
echo '<a class="item">';
}
echo '<i class="item ' . implode(' ', $class) . '"></i>' . $title;
echo '</a>';
endforeach;
echo '</div>';
else :
echo '<div class="ui error message"><p>Menu "' . $menu_name . '" not defined.</p></div>';
endif;
?>
Take a closer look at the code above. We’re looping through the menu items of the defined menu. Make sure to add classnames (for the icons) within the menu manager. Inserting class names (separate multiple class names with a space) is optional and hidden by default; you can activate the input field via the Screen Options at the top.
Update: You can also output the menu with links to the pages:
<?php
$menu_name="primary"; // this is the registered menu name
if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) :
$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
$menu_items = wp_get_nav_menu_items($menu->term_id);
echo '<div class="ui vertical menu">';
foreach ( (array) $menu_items as $key => $menu_item ) :
$title = $menu_item->title;
$url = $menu_item->url;
$class = $menu_item->classes; // get array with class names
if ( get_the_ID() == $menu_item->object_id ) { // check for current page
echo '<a class="item active" href="' . $url . '">';
} else {
echo '<a class="item" href="' . $url . '">';
}
echo '<i class="item ' . implode(' ', $class) . '"></i>' . $title;
echo '</a>';
endforeach;
echo '</div>';
else :
echo '<div class="ui error message"><p>Menu "' . $menu_name . '" not defined.</p></div>';
endif;
?>